<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="js" xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="prev" href="http://javascript.ru/ui">

<link rel="next" href="http://javascript.ru/ui/tree">

<link rel="prev" href="http://javascript.ru/ui">

<link rel="up" href="http://javascript.ru/ui">

<link rel="next" href="http://javascript.ru/ui/tree">

<style type="text/css" media="all">@import "/files/css/9f0ab4729280fdffdcad29e6b9d26e47.css";</style>
<script type="text/javascript" src="draganddrop_files/pack.js"></script>
<script type="text/javascript" src="draganddrop_files/ajax_vote_up_down.js"></script>
<script type="text/javascript" src="draganddrop_files/syntaxhighlighter.js"></script>
<script type="text/javascript" src="draganddrop_files/c3dcb5ea943ce52204c8588fb64dcd70.js"></script>
<script type="text/javascript" src="draganddrop_files/default_buttons_functions.js"></script>
<script type="text/javascript" src="draganddrop_files/jquery.js"></script>
<script type="text/javascript" src="draganddrop_files/forms.js"></script>
<script type="text/javascript" src="draganddrop_files/effects.js"></script>
<script type="text/javascript" src="draganddrop_files/effects_002.js"></script>
<script type="text/javascript" src="draganddrop_files/mistype.js"></script>
<script type="text/javascript">Drupal.extend({ settings: { "base_path": "/", "baseurl": "http://javascript.ru/", "uc_ajax_cart": { "url": "/cart/ajax/update", "text": "Записаться...", "effects": false, "emptyHide": 1, "disable": 1, "ddSupport": false, "itemCount": 0, "bclass": "disabled" } } });</script>
<script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = '/modules/syntaxhighlighter/sh/scripts/clipboard.swf'
  $(function() { SyntaxHighlighter.highlight() })
  </script>
<script type="text/javascript">var enter_from='http://www.google.com.ua/search?q=JS+drug+drop&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ru:official&client=firefox'</script>


	
<meta name="keywords" content="">
<meta name="description" content="">
	


<link rel="stylesheet" type="text/css" href="draganddrop_files/style-94ce38d6-00003.css" id="vbulletin_css">



<link rel="alternate" type="application/rss+xml" title="Статьи на javascript.ru" href="http://javascript.ru/article/feed">
<link rel="alternate" type="application/rss+xml" title="Все материалы с javascript.ru" href="http://javascript.ru/all/feed">





<script type="text/javascript" src="draganddrop_files/syntaxhighlighter.js"></script>
<script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = '/modules/syntaxhighlighter/sh/scripts/clipboard.swf'
  $(function() { SyntaxHighlighter.highlight() })
  </script>

<style type="text/css" media="all">@import "/modules/syntaxhighlighter/sh/styles/shCore.css";</style>
<style type="text/css" media="all">@import "/modules/syntaxhighlighter/sh/styles/shThemeDefault.css";</style>
<style type="text/css" media="all">@import "/themes/defaultangy/jquery.alerts.css";</style>

<script type="text/javascript"><!-- // hide from W3C validator

var SESSIONURL = "";
var IMGDIR_MISC = "/forum/images/ca_serenity/misc";
var vb_disable_ajax = parseInt("0", 10);
// --></script>


<script>
window._gaq =  []
_gaq.push(['_setAccount', 'UA-2056213-10']);
_gaq.push(["_addOrganic", "go.mail.ru","q"])
_gaq.push(["_addOrganic", "nova.rambler.ru","query"])
_gaq.push(["_addOrganic", "nigma.ru", "s"])
_gaq.push(["_addOrganic", "blogs.yandex.ru", "text", true])
_gaq.push(["_addOrganic", "webalta.ru", "q"])
_gaq.push(["_addOrganic", "aport.ru", "r"])
_gaq.push(["_addOrganic", "akavita.by", "z"])
_gaq.push(["_addOrganic", "meta.ua", "q"])
_gaq.push(["_addOrganic", "bigmir.net", "q"])
_gaq.push(["_addOrganic", "tut.by", "query"])
_gaq.push(["_addOrganic", "all.by", "query"])
_gaq.push(["_addOrganic", "i.ua", "q"])
_gaq.push(["_addOrganic", "online.ua", "q"])
_gaq.push(["_addOrganic", "a.ua", "s"])
_gaq.push(["_addOrganic", "ukr.net", "search_query"])
_gaq.push(["_addOrganic", "search.com.ua", "q"])
_gaq.push(["_addOrganic", "search.ua", "query"])
_gaq.push(["_addOrganic", "poisk.ru", "text"])
_gaq.push(["_addOrganic", "km.ru", "sq"])
_gaq.push(["_addOrganic", "liveinternet.ru", "ask"])
_gaq.push(["_addOrganic", "quintura.ru", "request"])
_gaq.push(["_addOrganic", "search.qip.ru","query"])
_gaq.push(["_addOrganic", "gde.ru","keywords"])
_gaq.push(["_addOrganic", "search.ukr.net","search_query"])
_gaq.push(["_addOrganic", "gogo.ru","q"])
_gaq.push(['_trackPageview']);
</script>
<title>Drag and drop</title>
<script async="" src="draganddrop_files/ga.js" type="text/javascript"></script><script async="" src="draganddrop_files/watch.js" type="text/javascript"></script></head><body>
<div id="wrapper">

<a name="top"></a>
<!-- main table --><table id="maintable" width="960" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td id="maintable-first">


<style>
div#mk-announce {
height: 35px;	
line-height: 35px;				
padding-left: 0px;
position: relative;
text-align: center;
border-bottom: 1px solid black;
}
div#mk-announce table td {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
padding: 5px 5px;
}
div#mk-announce table td a, div#mk-announce table td span {
color: white;
}
</style>
<div id="mk-announce">

<table style="margin: auto;" align="center" cellspacing="4"><tbody><tr>
<td style="padding-bottom: 0pt; font-size: 16px; padding-top: 0pt;"><a href="http://javascript.ru/mk" style="color: red;">Мастер-классы</a> по Javascript, AJAX/COMET, jQuery</td>
<!--
<td style="background: #f58220"><span>Москва</span></td>

<td style="background: #A52A2A"><span>С.-Петербург</span></td>
<td style="background: #0921a0;margin-right:10px"><span>Самара</span></td>
<td style="padding:5px">&nbsp;</td>

<td style="background: #848740"><span href="/mk">Одесса</span></td>

<td style="background: #ce2700"><span>Киев</span></td>
<td style="background: #ffde00"><span style="color: #376a94">Харьков</span ></td>
-->
<td style="background-color: rgb(0, 170, 255);"><a href="http://javascript.ru/mk" style="color: white;">Узнать больше...</a></td>

</tr></tbody></table>
</div>


<!-- header table --><table class="header-table" width="100%" border="0" cellpadding="0" cellspacing="0">
	<tbody><tr>
		<td align="left"><a href="http://javascript.ru/"><img title="Javascript.RU" src="draganddrop_files/logo.gif" alt="Javascript.RU" border="0"></a></td>
		<td class="header-table-login" valign="bottom" width="100%" align="right" nowrap="nowrap">
<!--
<a href="http://javascript.ru/master-kiev" style="color:yellow">Мастер-классы <b>в Киеве</b>, 26 декабря! &raquo;&raquo;</a><br/>
-->
		
		<!-- login form -->
		<form action="http://javascript.ru/forum/login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, 0)" class="register-form">
		<script type="text/javascript" src="draganddrop_files/vbulletin_md5.js"></script>
		<table border="0" cellpadding="0" cellspacing="3">
		<tbody><tr>
			<td class="smallfont"><label for="navbar_username">Имя</label></td>
			<td><input class="bginput" style="font-size: 11px;" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="Имя" onfocus="if (this.value == 'Имя') this.value = '';" type="text"></td>
			<td class="smallfont" colspan="2" style="text-align: left;" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" checked="checked" type="checkbox">Запомнить?</label></td>
                        
		</tr>
		<tr>
			<td class="smallfont"><label for="navbar_password">Пароль</label></td>
			<td><input class="bginput" style="font-size: 11px;" name="vb_login_password" id="navbar_password" size="10" tabindex="102" type="password"></td>
			<td style="text-align: left;"><input class="button" value="Вход" tabindex="104" title="Введите Ваше имя пользователя и пароль, чтобы войти, или нажмите кнопку 'Регистрация', чтобы зарегистрироваться." accesskey="s" type="submit">
</td>
<td style="text-align: left;">
		
<a href="http://javascript.ru/forum/register.php" rel="nofollow" class="register-link">Регистрация</a>
		
</td>
		</tr>
		</tbody></table>
		<input name="s" value="" type="hidden">
		<input name="do" value="login" type="hidden">		
		<input name="vb_login_md5password" type="hidden">
		<input name="vb_login_md5password_utf" type="hidden">
		</form>
		<!-- / login form -->
			

		</td>
	</tr>
	</tbody></table><!-- / header table --></td>
</tr>
<tr>
	<td class="maintable-content"><!-- content table --><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td class="content-row">

<!-- nav buttons bar -->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td class="navbar-row" align="center"><table class="navbar-row-table" width="100%" align="center" cellspacing="0">
	<tbody><tr class="vbmenu_dark" align="center">


<td class="vbmenu_control"><h1><a href="http://javascript.ru/forum/">Форум</a></h1>
</td>

<td class="vbmenu_control"><h1><a href="http://javascript.ru/book">Книги</a></h1>
</td>


<td class="vbmenu_control"><a href="http://javascript.ru/blog">Блоги</a>
</td>


<td class="vbmenu_control"><a href="http://javascript.ru/ecma">Стандарт языка</a>
</td>
<!--
<td class="vbmenu_control"><a href="http://javascript.ru/bot/log">IRC-логи</a></td>
-->
<td class="vbmenu_control"><a href="http://javascript.ru/mk" style="background-color: yellow; color: red;">* Мастер-классы по javascript *</a>
</td>


<td class="vbmenu_control"><h1><a href="http://javascript.ru/manual">
Справочник</a></h1>
</td>


		
		<td width="100%">&nbsp;</td>
		


</tr>
</tbody></table>
<table class="navbar-row-table" width="100%" align="center" cellspacing="0">
<tbody><tr class="vbmenu_dark" align="center">


<td class="vbmenu_control"><a href="http://javascript.ru/doctree">Статьи</a>
</td>

<td class="vbmenu_control"><a href="http://javascript.ru/test">Тест знаний</a>
</td>


<td class="vbmenu_control"><a href="http://javascript.ru/php">Аналоги функций PHP</a>
</td>


<td class="vbmenu_control"><script>document.write('<a href="http://phpclub.ru">PHPClub.ru</a>')</script><a href="http://phpclub.ru/">PHPClub.ru</a>
</td>


<td class="vbmenu_control"><a href="http://javascript.ru/paste">
PASTE BIN</a>
</td>


<td class="vbmenu_control"><h1><a href="http://javascript.ru/courses"><span>Курсы javascript</span></a>
</h1></td>

<!--
<td class="vbmenu_control"><h1><a href="http://javascript.ru/ajax">AJAX</a></h1>
</td>
-->

<td width="100%">&nbsp;</td>


		
	</tr>
	</tbody></table></td>
</tr>
</tbody></table>
<!-- content table -->
<!-- open content container -->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td class="content-row" valign="top">



<!-- NAVBAR POPUP MENUS -->
	
	
	<!-- header quick search form -->
	<div class="vbmenu_popup" id="navbar_search_menu" style="display: none;">
		<table border="0" cellpadding="4" cellspacing="1">
		<tbody><tr class="thead-row">
			<td class="thead">Поиск по форуму</td>
		</tr>
		<tr>
			<td class="vbmenu_option" title="nohilite">
				<form action="http://javascript.ru/forum/search.php?do=process" method="post">
					<input name="do" value="process" type="hidden">
					<input name="quicksearch" value="1" type="hidden">
					<input name="childforums" value="1" type="hidden">
					<input name="exactname" value="1" type="hidden">
					<input name="s" value="" type="hidden">
					<div><input class="bginput" name="query" size="25" tabindex="1001" type="text"><input class="button" value="Вперёд" tabindex="1004" type="submit"></div>
					<div style="margin-top: 4px;">
						<label for="rb_nb_sp0"><input name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" type="radio">Отображать темы</label>
						&nbsp;
						<label for="rb_nb_sp1"><input name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" type="radio">Отображать сообщения</label>
					</div>					
				</form>
			</td>
		</tr>
		<tr>
			<td class="vbmenu_option"><a href="http://javascript.ru/forum/search.php" accesskey="4" rel="nofollow">Расширенный поиск</a></td>
		</tr>
		
		</tbody></table>
	</div>
	<!-- / header quick search form -->
	

	
<!-- / NAVBAR POPUP MENUS -->

<!-- PAGENAV POPUP -->

	<div class="vbmenu_popup" id="pagenav_menu" style="display: none;">
		<table border="0" cellpadding="4" cellspacing="1">
		<tbody><tr class="thead-row">
			<td class="thead" nowrap="nowrap">К странице...</td>
		</tr>
		<tr>
			<td class="vbmenu_option" title="nohilite">
			<form action="/forum/index.php" method="get" onsubmit="return this.gotopage()" id="pagenav_form">
				<input class="bginput" id="pagenav_itxt" style="font-size: 11px;" size="4" type="text">
				<input class="button" id="pagenav_ibtn" value="Вперёд" type="button">
			</form>
			</td>
		</tr>
		</tbody></table>
	</div>

<!-- / PAGENAV POPUP -->





<!-- breadcrumb -->
<div id="navbar-row">

	<div class="navbar navbar-top"><a href="http://javascript.ru/" accesskey="1">Главная</a> 



	<span class="navbar">» <a href="http://javascript.ru/ui">Интерфейсы</a></span>

 »
<strong>
	Drag and drop

</strong>

</div>

</div>
<br class="spacer8">



<!-- / breadcrumb -->

<!-- pm notification -->

<!-- / pm notification -->









<table id="vbdrupalcontent" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<colgroup>

<col width="*">
<col width="10"><col width="200">
</colgroup>
<tbody><tr valign="top">

<td width="100%">









<div class="sibling-navigation"><div class="page-links clear-block"><a class="sibling-navigation-prev" href="http://javascript.ru/ui">« Интерфейсы</a><a class="sibling-navigation-next" href="http://javascript.ru/ui/tree">Грамотное javascript-дерево за 7 шагов »</a></div></div>





<table class="node-table node_book node-full" id="node_1593" style="border-top-width: 0pt;" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">

<tbody><tr>
	<td class="submitted">
		
                <table class="submitted-table"><tbody><tr>
                
                <td class="submitted-author">
		<a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>

                </td>
                

		


		

		</tr></tbody></table>
	</td>

</tr>

<tr>
	<td class="node-content">



<h1 class="htitle">Drag and drop</h1>


	
    

        

        <div class="toc toc-full">
<ol>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#osnovnaya-logika-drag-and-drop">Основная логика drag and drop</a>
  </li>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#koordinaty-i-knopka-myshi">Координаты и кнопка мыши</a>
    <ol>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#demo">Демо</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#otslezhivaem-klik-na-obekte-perenosa">Отслеживаем клик на объекте переноса</a>
    <ol>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#demo-1">Демо</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#drag-and-drop-kontroller">Drag and drop контроллер</a>
  </li>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#vizualnoe-peremeshchenie-elementa">Визуальное перемещение элемента</a>
    <ol>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#nachalo-dvizheniya:-sohranenie-pozicii-kursora-v-elemente">Начало движения: сохранение позиции курсора в элементе</a>
      </li>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#demo-2">Демо</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#opuskaem-element">Опускаем элемент</a>
    <ol>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#demo-3">Демо</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#indikaciya-perenosa-nad-obektom">Индикация переноса над объектом</a>
  </li>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#otdelyaem-nachalo-drag-n-drop-ot-prostogo-klika">Отделяем начало drag'n'drop от простого клика</a>
    <ol>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#demo-4">Демо</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#optimizaciya">Оптимизация</a>
    <ol>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#smena-sposoba-vychisleniya-koordinat">Смена способа вычисления координат</a>
        <ol>
          <li>
            <a href="http://javascript.ru/ui/draganddrop#document-elementfrompoint-x-y"><code>document.elementFromPoint(x,y)</code></a>
          </li>
          <li>
            <a href="http://javascript.ru/ui/draganddrop#vychislenie-po-izvestnym-razmeram">Вычисление по известным размерам</a>
          </li>
        </ol>
      </li>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#ubrat-element-iz-pod-kursora">Убрать элемент из-под курсора</a>
      </li>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#uprostit-obekt-perenosa">Упростить объект переноса</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#refaktoring">Рефакторинг</a>
    <ol>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#dragobject"><code>DragObject</code></a>
      </li>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#droptarget"><code>DropTarget</code></a>
      </li>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#dragmaster"><code>dragMaster</code></a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#itogovyy-drag-n-drop-freymvork">Итоговый Drag'n'Drop фреймворк</a>
    <ol>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#obychnyy-perenos">Обычный перенос</a>
      </li>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#vlozhennye-akceptory">Вложенные акцепторы</a>
      </li>
      <li>
        <a href="http://javascript.ru/ui/draganddrop#nekotorye-dopolnitelnye-recepty">Некоторые дополнительные рецепты</a>
        <ol>
          <li>
            <a href="http://javascript.ru/ui/draganddrop#peremeshcheniya-akceptorov-v-processe-perenosa">Перемещения акцепторов в процессе переноса</a>
          </li>
          <li>
            <a href="http://javascript.ru/ui/draganddrop#drag-and-drop-mezhdu">Drag and drop "между".</a>
          </li>
          <li>
            <a href="http://javascript.ru/ui/draganddrop#animaciya-otmeny-perenosa">Анимация отмены переноса</a>
          </li>
          <li>
            <a href="http://javascript.ru/ui/draganddrop#proverka-prav">Проверка прав</a>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://javascript.ru/ui/draganddrop#rezyume">Резюме</a>
  </li>
</ol>

</div>

	


	
            <div class="author-info"><div class="author-info-data"></div></div>
        

	<p>В свое время приходилось реализовывать кучу drag and drop'ов под самым разным соусом. </p>
<p>Эта статья представляет собой учебник-выжимку о том, как организовать
 drag'n'drop в javascript, начиная от основ и заканчивая готовым 
фреймворком.</p>
<p>Кроме того, почти все javascript-библиотеки реализуют drag and drop 
так, как написано (в статье дано несколько разных вариантов, не факт что
 ваш фреймворк использует лучший). Зная, что и как, вы сможете поправить
 и адаптировать существующую библиотеку под себя.</p>
<p>Drag'n'drop в свое время был замечательным открытием в области 
интерфейсов, которое позволило упростить большое количество операций.</p>
<p>Одно из самых очевидных применений drag'n'drop - переупорядочение 
данных. Это могут быть блоки, элементы списка, и вообще - любые 
DOM-элементы и их наборы.</p>
<p>Перенос мышкой может заменить целую последовательность кликов. И, 
самое главное, он упрощает внешний вид интерфейса: функции, реализуемые 
через drag'n'drop, в ином случае потребовали бы дополнительных полей, 
виджетов и т.п.</p>
<h2 id="osnovnaya-logika-drag-and-drop" class="header-link"><a href="#osnovnaya-logika-drag-and-drop">Основная логика drag and drop</a></h2>
<p>Организовать перенос элементов по странице - довольно просто. Для этого нужно:</p>
<ol>
<li>При помощи события <code>mouseDown</code> отследить клик на переносимом элементе</li>
<li>При каждом движении мыши в обработчике события <code>mouseMove</code> передвигать переносимый элемент по странице.</li>
<li>При отпускании кнопки мыши, то есть наступлении события <code>mouseUp</code> - остановить перенос элемента и произвести все действия, связанные с окончанием drag and drop.</li>
</ol>
<h2 id="koordinaty-i-knopka-myshi" class="header-link"><a href="#koordinaty-i-knopka-myshi">Координаты и кнопка мыши</a></h2>
<p>При обработке событий, связанных с мышью, нужен кроссбраузерный 
способ получения координат курсора из события в обработчике. Кроме того,
 необходимо знать нажатую кнопку мыши.</p>
<p>Для этого будем использовать свойства <code>which</code> и <code>pageX/pageY</code>, полное описание и механизмы кросс-браузерной реализации которых есть в статье по <a href="http://javascript.ru/tutorial/events/properties">свойствам объекта событие</a>. </p>
<dl>
<dt><code>which</code></dt>
<dd>кнопка мыши - 1: левая, 2: средняя, 3: правая</dd>
<dt><code>pageX/pageY</code></dt>
<dd>координаты курсора относительно верхнего-левого угла документа (с учетом прокрутки)</dd>
</dl>
<p>Кроссбраузерно ставить эти свойства на объект будет функция <code>fixEvent</code> (по статье <a href="http://javascript.ru/tutorial/events/properties">свойства объекта событие</a>):</p>
<div class="syntaxhighlighter  jscript" id="highlighter_775450"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_775450_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_775450" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">fixEvent(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// получить объект событие для IE</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = e || window.event</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// добавить pageX/pageY для IE</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">( e.pageX == </code><code class="jscript keyword">null</code> <code class="jscript plain">&amp;&amp; e.clientX != </code><code class="jscript keyword">null</code> <code class="jscript plain">) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">html = document.documentElement</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">body = document.body</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e.pageX = e.clientX + (html &amp;&amp; html.scrollLeft || body &amp;&amp; body.scrollLeft || 0) - (html.clientLeft || 0)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e.pageY = e.clientY + (html &amp;&amp; html.scrollTop || body &amp;&amp; body.scrollTop || 0) - (html.clientTop || 0)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// добавить which для IE</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(!e.which &amp;&amp; e.button) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e.which = e.button &amp; 1 ? 1 : ( e.button &amp; 2 ? 3 : ( e.button &amp; 4 ? 2 : 0 ) )</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">e</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><script src="draganddrop_files/fixEvent.js"></script><script>
$(document).mousemove(
    function(event){
	document.getElementById('mouseX').value = event.pageX
	document.getElementById('mouseY').value = event.pageY
    }
)
</script><p>
В этом коде <code>e.which</code> проходит кросс-браузерную обработку, 
чтобы корректно отражать нажатую кнопку мыши. Вы можете подробно 
прочитать об этом в статье <a href="http://javascript.ru/tutorial/events/properties">Свойства объекта событие</a>.</p>
<h3 id="demo" class="header-link"><a href="#demo">Демо</a></h3>
<p>На демке ниже обработчик <code>mouseMove</code> отслеживает координаты курсора мыши относительно левого-верхнего угла страницы, используя кроссбраузерную обертку <code>fixEvent</code>.</p>
<div class="syntaxhighlighter  jscript" id="highlighter_760951"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_760951_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_760951" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="jscript plain">document.onmousemove = mouseMove</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(event){ </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">event = fixEvent(event)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.getElementById(</code><code class="jscript string">'mouseX'</code><code class="jscript plain">).value = event.pageX</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.getElementById(</code><code class="jscript string">'mouseY'</code><code class="jscript plain">).value = event.pageY</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>Координата X:<input value="1010" id="mouseX" type="text"><br>
Координата Y:<input value="344" id="mouseY" type="text"></p>
<h2 id="otslezhivaem-klik-na-obekte-perenosa" class="header-link"><a href="#otslezhivaem-klik-na-obekte-perenosa">Отслеживаем клик на объекте переноса</a></h2>
<p>Чтобы начать перенос элемента, мы должны отловить нажатие кнопки мыши на объекте.</p>
<p>Для этого нам пригодится событие <code>mousedown</code>. Повесим обработчик на те элементы, которые хотим сделать доступными для переноса.</p>
<p>Пока этот обработчик будет запоминать объект в глобальной переменной <code>dragObject</code></p>
<div class="syntaxhighlighter  jscript" id="highlighter_393991"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_393991_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_393991" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="jscript plain">element.onmousedown = </code><code class="jscript keyword">function</code><code class="jscript plain">(e){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// запомнить переносимый объект </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// в переменной dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject&nbsp; = </code><code class="jscript keyword">this</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// остановить обработку события</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>8</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>
Остановить обработку события <code>return false</code> очень важно - иначе браузер может запустить свои механизмы перетаскивания элементов и все нам поломать.</p>
<p>В случае с отпусканием кнопки мыши все проще - объект мы уже знаем, так что можно повесить один обработчик <code>onmouseup</code> на <code>document</code>.</p>
<div class="syntaxhighlighter  jscript" id="highlighter_936883"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_936883_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_936883" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="jscript plain">document.onmouseup = </code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// опустить переносимый объект</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><h3 id="demo-1" class="header-link"><a href="#demo-1">Демо</a></h3>
<p>При нажатии на элемент он запоминается и выделяется.<br>
Выделение(запоминание) действует на все время, когда нажата кнопка мыши, в том числе при перемещении курсора.</p>
<style>
#clickObjects1 img {
  display: inline;
  margin: 3px;
}
</style><script src="draganddrop_files/click.js"></script><script>
$(document).ready(function() {
    var clickObjects = document.getElementById('clickObjects1').getElementsByTagName('IMG')
    for(var i=0; i<clickObjects.length; i++) {
        clickObjects[i].onmousedown = function(e){
	    dragObject  = this;
	    dragObject.style.backgroundColor = 'teal';
	    return false
	}
	
    }
})
</script><p></p><fieldset><br>
<legend>Нажми меня</legend>
<div id="clickObjects1"><img style="" src="draganddrop_files/piki.gif"><img style="" src="draganddrop_files/bubi.gif"><img style="" src="draganddrop_files/trefi.gif"><img style="" src="draganddrop_files/chervi.gif"></div>
<p></p></fieldset>
<p>Остается добавить визуальное перемещение элемента - и drag and drop заработает.</p>
<div class="smart">
<div class="smart-head">Оптимизация <code>onmousedown</code></div>
<p>Иногда бывает, что объектов, которые могут быть перенесены, много. 
Например, это ячейка таблицы или длинный список, или дерево статей с 
массой узлов.</p>
<p>Тогда время инициализации можно сильно сократить, если назначать обработчик <code>onmousedown</code> не на каждый объект переноса, а на контейнер. И уже в самом обработчике по <code>event.target</code> определять, где произошел клик.
</p></div>
<h2 id="drag-and-drop-kontroller" class="header-link"><a href="#drag-and-drop-kontroller">Drag and drop контроллер</a></h2>
<p>Перед дальнейшим развитием проведем реорганизацию кода.</p>
<p>Используем способ описания объекта без <code>new</code> (описан <a href="http://javascript.ru/tutorial/object/inheritance#factory">здесь как фабрика объектов</a>), чтобы объявить объект <code>dragMaster</code>, предоставляющий необходимый функционал и отслеживающий перенос.</p>
<div class="syntaxhighlighter  jscript" id="highlighter_37956"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_37956_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_37956" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">dragMaster = (</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// private методы и свойства</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">клик на переносимом элементе: начать перенос</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(e){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(dragObject) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">отобразить перенос объекта</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseUp(e){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(dragObject) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">конец переноса</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// public методы и свойства </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">init: </code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// инициализовать контроллер</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = mouseMove</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = mouseUp</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">},</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>28</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>29</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">makeDraggable: </code><code class="jscript keyword">function</code><code class="jscript plain">(element){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>30</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// сделать элемент переносимым</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>31</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.onmousedown = mouseDown</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>32</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>33</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>35</code></td><td class="content"><code class="jscript plain">}())</code></td></tr></tbody></table></div></div></div><p>
При таком способе задания объекта <code>dragMaster</code> получает публичные свойства (например, <code>makeDraggable</code>), которые имеют доступ к приватным переменным и методам <code>mouse*</code>, <code>dragObject</code>, так как являются вложенными функциями.</p>
<p>Полученный код:</p>
<ol>
<li>Не загрязняет глобальную область видимости переменными типа <code>dragObject</code>.</li>
<li>Дает единый объект-синглтон dragMaster, управляющий переносом.</li>
<li>Приватные переменные хорошо сжимаются javascript-компрессором, что убыстряет и уменьшает код.</li>
</ol>
<p>Последний пункт очень важен, так как обработчики <code>mouseMove</code>, <code>mouseUp</code> вызываются при каждом передвижении мыши и поднятии кнопки соответственно. Если <code>mouseMove</code> будет работать медленно, то передвижение курсора станет рваным, заметно тормозным. </p>
<p>На это натыкались многие писатели drag'n'drop приложений. Мы же будем
 изначально закладывать производительность во все критические участки 
кода.</p>
<h2 id="vizualnoe-peremeshchenie-elementa" class="header-link"><a href="#vizualnoe-peremeshchenie-elementa">Визуальное перемещение элемента</a></h2>
<p>Для того, чтобы перенести элемент, ему нужно поставить значение CSS-свойства <code>position</code> в <code>absolute</code>.
 Тогда он будет позиционироваться относительно верхнего-левого угла 
документа (точнее говоря, относительно ближайшего родителя, у которого 
position - relative/absolute, но у нас таких нет), и установка 
CSS-свойств <code>left</code> и <code>top</code> в координаты курсора мыши поместит левый-верхний угол элемента непосредственно под указатель.</p>
<p></p><fieldset><br>
<legend>Вот так:</legend><br>
<img src="draganddrop_files/chervi_pointer.gif" style="border: 1px solid black;"><br>
</fieldset>
<p>Для перемещения элемента нам достаточно всего-лишь обновлять значения <code>left/top</code> при каждом движении мыши <code>mousemove</code>!</p>
<h3 id="nachalo-dvizheniya:-sohranenie-pozicii-kursora-v-elemente" class="header-link"><a href="#nachalo-dvizheniya:-sohranenie-pozicii-kursora-v-elemente">Начало движения: сохранение позиции курсора в элементе</a></h3>
<p>Посетитель обычно кликает не в левый-верхний угол, а куда угодно на элементе. </p>
<p>Поэтому чтобы элемент не прилипал к курсору верхним-левым углом, к 
позиции элемента необходимо добавить смещение мыши на момент клика.</p>
<p>На рисунке ниже <code>mouseX/mouseY</code> - координаты курсора мыши, а <code>positionX/positionY</code> - координаты верхнего-левого угла элемента, которые легко получить из DOM:</p>
<p><img src="draganddrop_files/chervi_pos.gif" style="border: 1px solid black; margin-left: 50px;"></p>
<p>Отсюда легко получаем смещение курсора мыши:</p>
<div class="syntaxhighlighter nogutter  jscript" id="highlighter_775217"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="jscript plain">mouseOffsetX = mouseX - positionX</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="jscript plain">mouseOffsetY = mouseY - positionY</code></td></tr></tbody></table></div></div></div><p>
Это изначальное смещение мы запоминаем при клике, прибавляем его при начале движения и сохраняем в дальнейшем.<br>
Тогда позиция элемента относительно курсора мыши будет все время одной и той же.</p>
<div class="syntaxhighlighter  jscript" id="highlighter_152583"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_152583_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_152583" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">mouseOffset</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="jscript plain">element.onmousedown = </code><code class="jscript keyword">function</code><code class="jscript plain">(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">...</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">pos = getPosition(element)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset= { </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">x: e.pageX - pos.x, </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">y: e.pageY - pos.y </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">...</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="jscript plain">document.onmousemove = </code><code class="jscript keyword">function</code><code class="jscript plain">(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">...</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.style.left = e.pageX - mouseOffset.x + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.style.top = e.pageY - mouseOffset.y&nbsp; + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">...</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><h3 id="demo-2" class="header-link"><a href="#demo-2">Демо</a></h3>
<p></p><fieldset><br>
<legend>Перенеси меня</legend>
<div id="dragObjects1"><img style="position: absolute; top: 5684px; left: 275px;" src="draganddrop_files/piki.gif"><img style="position: absolute; top: 5717px; left: 180px;" src="draganddrop_files/bubi.gif"><img style="position: absolute; top: 5694px; left: 400px;" src="draganddrop_files/trefi.gif"><img style="position: absolute; top: 5700px; left: 218px;" src="draganddrop_files/chervi.gif"></div>
<p></p></fieldset>
<script src="draganddrop_files/drag.js"></script><script>
$(document).ready(function() {
    var dragObjects = document.getElementById('dragObjects1').getElementsByTagName('img')
    for(var i=0; i<dragObjects.length; i++) {
        dragMaster1.makeDraggable(dragObjects[i])
    }
})
</script><p>
Код контроллера:</p>
<div class="syntaxhighlighter  jscript" id="highlighter_393065"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_393065_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_393065" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">dragMaster = (</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseOffset</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// получить сдвиг target относительно курсора мыши</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getMouseOffset(target, e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">docPos&nbsp; = getPosition(target)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{x:e.pageX - docPos.x, y:e.pageY - docPos.y}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseUp(){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// очистить обработчики, т.к перенос закончен</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.ondragstart = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.body.onselectstart = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(e){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>24</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">with</code><code class="jscript plain">(dragObject.style) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">position = </code><code class="jscript string">'absolute'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top = e.pageY - mouseOffset.y + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>28</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left = e.pageX - mouseOffset.x + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>29</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>30</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>31</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>32</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>33</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>35</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(e.which!=1) </code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>36</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>37</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject&nbsp; = </code><code class="jscript keyword">this</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>38</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>39</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// получить сдвиг элемента относительно курсора мыши</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>40</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset = getMouseOffset(</code><code class="jscript keyword">this</code><code class="jscript plain">, e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>41</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>42</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// эти обработчики отслеживают процесс и окончание переноса</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>43</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = mouseMove</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>44</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = mouseUp</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>45</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>46</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// отменить перенос и выделение текста при клике на тексте</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>47</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.ondragstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>48</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.body.onselectstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>49</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>50</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>51</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>52</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>53</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>54</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">makeDraggable: </code><code class="jscript keyword">function</code><code class="jscript plain">(element){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>55</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.onmousedown = mouseDown</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>56</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>57</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>58</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>59</code></td><td class="content"><code class="jscript plain">}())</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>60</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>61</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">getPosition(e){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>62</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">left = 0</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>63</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">top&nbsp; = 0</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>64</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>65</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">while</code> <code class="jscript plain">(e.offsetParent){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>66</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left += e.offsetLeft</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>67</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top&nbsp; += e.offsetTop</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>68</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e&nbsp;&nbsp;&nbsp; = e.offsetParent</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>69</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>70</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>71</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left += e.offsetLeft</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>72</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top&nbsp; += e.offsetTop</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>73</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>74</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{x:left, y:top}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>75</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>
В коде появилась новая функция <code>getPosition(элемент)</code> - она получает абсолютные координаты верхнего-правого угла элемента. Функция это стандартная и много где используемая.</p>
<p>Кроме того, при начале переноса останавливается выделение и перенос текста браузером:</p>
<div class="syntaxhighlighter nogutter  jscript" id="highlighter_852264"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="jscript plain">document.ondragstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="jscript plain">document.body.onselectstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>Если
 этого не сделать, то движение курсора мыши при нажатой кнопке будет не 
только перемещать элемент, но и, например, выделять текст под собой  
(стандартная функция выделения текста на странице).</p>
<div class="smart">
Иногда красивее и удобнее - визуально перемещать не сам элемент, а его клон или макет.
<p>Например, переносимый объект очень сложен, и его передвижение целиком тормозит браузер и выглядит громоздко/неэстетично. </p>
<p>Сам элемент при этом скрывается <code>display/visibility='none'</code> или просто остается на месте, в зависимости от логики интерфейса.</p>
<p>Переносимый клон инициализуется в начале переноса и уничтожается в конце.
</p></div>
<h2 id="opuskaem-element" class="header-link"><a href="#opuskaem-element">Опускаем элемент</a></h2>
<p>Когда иконка опущена, нам необходимо определить, куда.<br>
В другое хранилище - переместить. В корзину - удалить, и т.п.</p>
<p>Существенная техническая проблема заключается в том, что событие <code>mouseup</code> сработает не на корзине, а на переносимом элементе, т.к. курсор мыши находится именно над ним.</p>
<p><img src="draganddrop_files/mouseup_event.gif" style="margin-left: 100px;"></p>
<p>Поэтому в событии будет информация об элементе непосредственно под курсором. На картинке выше <code>event.target = сердечко</code>, а корзина в объекте события <code>event</code> не присутствует.</p>
<p>Определить, что иконка опущена на корзину, можно, сравнив координаты корзины с коорданатами мыши на момент события.</p>
<h3 id="demo-3" class="header-link"><a href="#demo-3">Демо</a></h3>
<script src="draganddrop_files/drop.js"></script><script>
$(document).ready(function() {
        var dragObjects = document.getElementById('dragObjects2').getElementsByTagName('img')
    for(var i=0; i<dragObjects.length; i++) {
        dragMaster2.makeDraggable(dragObjects[i])
    }    
    dragMaster2.addDropTarget(document.getElementById('trash2'))
    
})
</script><p>
В момент опускания на корзину выводится сообщение, перемещаемая иконка - в переменной <code>dragObject</code>, цель переноса (корзина, объект-акцептор) - в переменной <code>currentDropTarget</code>.</p>
<p></p><fieldset><br>
<legend>Перенеси меня в корзину</legend>
<div id="dragObjects2"><img src="draganddrop_files/piki.gif"><img src="draganddrop_files/bubi.gif"><img style="position: absolute; top: 7944px; left: 291px;" src="draganddrop_files/trefi.gif"><img style="position: absolute; top: 7948px; left: 351px;" src="draganddrop_files/chervi.gif"></div>
<p><img src="draganddrop_files/trash.gif" style="margin-left: 100px;" id="trash2"><br>
</p></fieldset>
<p>В коде контроллера: функции, тело которых заменено на "...", остались без изменения с прошлого примера.</p>
<div class="syntaxhighlighter  jscript" id="highlighter_229208"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_229208_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_229208" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">dragMaster = (</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseOffset</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dropTargets = []</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseUp(e){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">for</code><code class="jscript plain">(</code><code class="jscript keyword">var</code> <code class="jscript plain">i=0; i&lt;dropTargets.length; i++){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targ&nbsp; = dropTargets[i]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targPos&nbsp;&nbsp;&nbsp; = getPosition(targ)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targWidth&nbsp; = parseInt(targ.offsetWidth)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targHeight = parseInt(targ.offsetHeight)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code><code class="jscript plain">(</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageX &gt; targPos.x)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageX &lt; (targPos.x + targWidth))&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageY &gt; targPos.y)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageY &lt; (targPos.y + targHeight))){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">alert(</code><code class="jscript string">"перенесен объект dragObject на акцептор currentDropTarget"</code><code class="jscript plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>25</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">removeDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>28</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>29</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>30</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>31</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>32</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(e.which!=1) </code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>33</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject&nbsp; = </code><code class="jscript keyword">this</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>35</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset = getMouseOffset(</code><code class="jscript keyword">this</code><code class="jscript plain">, e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>36</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>37</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>38</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>39</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>40</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>41</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>42</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>43</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">removeDocumentEventHandlers() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>44</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>45</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>46</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.ondragstart = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>47</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.body.onselectstart = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>48</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>49</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>50</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">addDocumentEventHandlers() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>51</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = mouseMove</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>52</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = mouseUp</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>53</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>54</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.ondragstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>55</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.body.onselectstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>56</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>57</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>58</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getMouseOffset(target, e) {...}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>59</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>60</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(e) {...}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>61</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>62</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>63</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">makeDraggable: </code><code class="jscript keyword">function</code><code class="jscript plain">(element){...},</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>64</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>65</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDropTarget: </code><code class="jscript keyword">function</code><code class="jscript plain">(dropTarget){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>66</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTargets.push(dropTarget)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>67</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>68</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>69</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>70</code></td><td class="content"><code class="jscript plain">}())</code></td></tr></tbody></table></div></div></div><div class="syntaxhighlighter collapsed  jscript" id="highlighter_645250"><div class="bar"><div class="toolbar"><a class="item expandSource" style="width: 16px; height: 16px;" title="Показать исходный код" href="#expandSource">Показать исходный код</a><div class="item copyToClipboard"><embed id="highlighter_645250_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_645250" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>001</code></td><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">dragMaster2 = (</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>002</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>003</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>004</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseOffset</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>005</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>006</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dropTargets = []</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>007</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>008</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseUp(e){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>009</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>010</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>011</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">for</code><code class="jscript plain">(</code><code class="jscript keyword">var</code> <code class="jscript plain">i=0; i&lt;dropTargets.length; i++){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>012</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targ&nbsp; = dropTargets[i]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>013</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targPos&nbsp;&nbsp;&nbsp; = getPosition(targ)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>014</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targWidth&nbsp; = parseInt(targ.offsetWidth)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>015</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targHeight = parseInt(targ.offsetHeight)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>016</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>017</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code><code class="jscript plain">(</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>018</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageX &gt; targPos.x)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>019</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageX &lt; (targPos.x + targWidth))&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>020</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageY &gt; targPos.y)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>021</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageY &lt; (targPos.y + targHeight))){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>022</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">alert(</code><code class="jscript string">"dragObject was dropped onto currentDropTarget!"</code><code class="jscript plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>023</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>024</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>025</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>026</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>027</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">removeDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>028</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>029</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>030</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">removeDocumentEventHandlers() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>031</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>032</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>033</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.ondragstart = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>034</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.body.onselectstart = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>035</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>036</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>037</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getMouseOffset(target, e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>038</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">docPos&nbsp; = getPosition(target)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>039</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{x:e.pageX - docPos.x, y:e.pageY - docPos.y}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>040</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>041</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>042</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>043</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(e){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>044</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>045</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>046</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">with</code><code class="jscript plain">(dragObject.style) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>047</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">position = </code><code class="jscript string">'absolute'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>048</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top = e.pageY - mouseOffset.y + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>049</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left = e.pageX - mouseOffset.x + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>050</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>051</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>052</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>053</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>054</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>055</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>056</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(e.which!=1) </code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>057</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>058</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject&nbsp; = </code><code class="jscript keyword">this</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>059</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset = getMouseOffset(</code><code class="jscript keyword">this</code><code class="jscript plain">, e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>060</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>061</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>062</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>063</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>064</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>065</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>066</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">addDocumentEventHandlers() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>067</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = mouseMove</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>068</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = mouseUp</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>069</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>070</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// отменить перенос и выделение текста при клике на тексте</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>071</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.ondragstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>072</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.body.onselectstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>073</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>074</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>075</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>076</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>077</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">makeDraggable: </code><code class="jscript keyword">function</code><code class="jscript plain">(element){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>078</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.onmousedown = mouseDown</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>079</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">},</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>080</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>081</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDropTarget: </code><code class="jscript keyword">function</code><code class="jscript plain">(dropTarget){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>082</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTargets.push(dropTarget)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>083</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>084</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>085</code></td><td class="content"><code class="jscript plain">}())</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>086</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>087</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">getPosition(e){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>088</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">left = 0;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>089</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">top&nbsp; = 0;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>090</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>091</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">while</code> <code class="jscript plain">(e.offsetParent){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>092</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left += e.offsetLeft;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>093</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top&nbsp; += e.offsetTop;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>094</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e&nbsp;&nbsp;&nbsp;&nbsp; = e.offsetParent;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>095</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>096</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>097</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left += e.offsetLeft;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>098</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top&nbsp; += e.offsetTop;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>099</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>100</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{x:left, y:top};</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>101</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>
Основных изменений всего три. </p>
<p>Добавлен массив <code>dropTargets</code> и функция <code>addDropTarget</code>, которая добавляет в него элементы, на которые можно дропать.</p>
<p>Измененный обработчик <code>mouseUp</code> теперь проходит в цикле по
 возможным таким объектам и проверяет, не находится ли курсор внутри 
ограничивающего объект прямоугольника. </p>
<p>Если да, то демка всего лишь выводит сообщение. Реально приложение, конечно, может сделать более сложные действия.</p>
<p>Кроме того, установка и удаление обработчиков событий для <code>document</code> выделены в отдельные функции - просто в целях лучшей читаемости.</p>
<h2 id="indikaciya-perenosa-nad-obektom" class="header-link"><a href="#indikaciya-perenosa-nad-obektom">Индикация переноса над объектом</a></h2>
<p>В удобном интерфейсе мы, скорее всего, захотим как-то показывать посетителю, над каким объектом он сейчас находится.</p>
<p>Единственно место, где это можно сделать - обработчик <code>mouseMove</code>. Сама проверка, над чем курсор сейчас находится, полностью аналогична <code>mouseUp</code>.</p>
<p>Однако, так как <code>mouseMove</code> выполняется при каждом передвижении мыши, его надо максимально оптимизировать.</p>
<p>Функция <code>getPosition</code> - довольно медленная: она работает с DOM, и ей надо пройти по всей цепочке <code>offsetParent</code>. Выполнять ее каждый раз при движении мыши для поиска текущего акцептора - все равно что нажать на большой-большой тормоз.</p>
<p>Стандартным выходом в такой ситуации является кеширование координат 
акцепторов, а точнее - их ограничивающих прямоугольников, так чтобы код <code>mouseMove</code> был максимально прост.</p>
<p></p><fieldset><br>
<legend>Пронеси меня над корзиной</legend>
<div id="dragObjects3"><img src="draganddrop_files/piki.gif"><img src="draganddrop_files/bubi.gif"><img src="draganddrop_files/trefi.gif"><img style="position: absolute; top: 9835px; left: 254px;" src="draganddrop_files/chervi.gif"></div>
<p><img class="" src="draganddrop_files/trash.gif" style="margin-left: 100px;" id="trash3"><br>
</p></fieldset>
<style>
.uponMe { background-color: teal }
</style><script src="draganddrop_files/dropMove.js"></script><script>
$(document).ready(function() {
        var dragObjects = document.getElementById('dragObjects3').getElementsByTagName('img')
    for(var i=0; i<dragObjects.length; i++) {
        dragMaster3.makeDraggable(dragObjects[i])
    }    
    dragMaster3.addDropTarget(document.getElementById('trash3'))
    
})
</script><p>
Код уже стал довольно длинным, поэтому в листинге ниже повторяющиеся фрагменты заменены на  троеточие "..."</p>
<div class="syntaxhighlighter  jscript" id="highlighter_616632"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_616632_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_616632" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">dragMaster = (</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseOffset</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dropTargets = []</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* кеш прямоугольников границ акцепторов */</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dropTargetRectangles</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* текущий акцептор, над которым объект в данный момент */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">currentDropTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">cacheDropTargetRectangles() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTargetRectangles = </code><code class="jscript comments">/* сделать кеш прямоугольников */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(e.which!=1) </code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* начать перенос */</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject&nbsp; = </code><code class="jscript keyword">this</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset = getMouseOffset(</code><code class="jscript keyword">this</code><code class="jscript plain">, e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>25</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* закешировать прямоугольники при начале переноса */</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">cacheDropTargetRectangles()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>28</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>29</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>30</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>31</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>32</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>33</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getCurrentTarget(e) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>35</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dropTarget = </code><code class="jscript comments">/* взять из кеша прямоугольник, в котором мышь */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>36</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>37</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">dropTarget </code><code class="jscript comments">/* null, если мы не над акцепторами */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>38</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>39</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>40</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(e){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>41</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* визуально показать перенос объекта */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>42</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">with</code><code class="jscript plain">(dragObject.style) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>43</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">position = </code><code class="jscript string">'absolute'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>44</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top = e.pageY - mouseOffset.y + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>45</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left = e.pageX - mouseOffset.x + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>46</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>47</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>48</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* newTarget = над каким акцептором сейчас объект */</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>49</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">newTarget = getCurrentTarget(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>50</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>51</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* если ушли со старого акцептора */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>52</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget &amp;&amp; currentDropTarget != newTarget) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>53</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* убрать выделение currentDropTarget */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>54</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>55</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>56</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* пришли на новый акцептор (возможно null) */</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>57</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">currentDropTarget = newTarget</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>58</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>59</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* если новый акцептор существует (не null) */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>60</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(newTarget) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>61</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* выделить newTarget */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>62</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>63</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>64</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code><code class="jscript plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>65</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>66</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>67</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseUp(ev){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>68</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>69</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">alert(</code><code class="jscript string">"перенесен объект dragObject на акцептор currentDropTarget"</code><code class="jscript plain">)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>70</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* убрать выделение с&nbsp; currentDropTarget */</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>71</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>72</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>73</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* конец операции переноса */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>74</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>75</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">removeDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>76</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>77</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>78</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getMouseOffset(target, e) {...}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>79</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>80</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">addDocumentEventHandlers() {...}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>81</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">removeDocumentEventHandlers() {...}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>82</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>83</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>84</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">...</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>85</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>86</code></td><td class="content"><code class="jscript plain">}())</code></td></tr></tbody></table></div></div></div><p>
Полностью рабочий вариант с кешем и т.п. - здесь:</p>
<div class="syntaxhighlighter collapsed  jscript" id="highlighter_653288"><div class="bar"><div class="toolbar"><a class="item expandSource" style="width: 16px; height: 16px;" title="Показать исходный код" href="#expandSource">Показать исходный код</a><div class="item copyToClipboard"><embed id="highlighter_653288_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_653288" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>001</code></td><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">dragMaster = (</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>002</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>003</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>004</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseOffset</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>005</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>006</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dropTargets = []</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>007</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>008</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dropTargetRectangles</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>009</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>010</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">currentDropTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>011</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>012</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">cacheDropTargetRectangles() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>013</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTargetRectangles = []</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>014</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>015</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">for</code><code class="jscript plain">(</code><code class="jscript keyword">var</code> <code class="jscript plain">i=0; i&lt;dropTargets.length; i++){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>016</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targ&nbsp; = dropTargets[i];</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>017</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targPos&nbsp;&nbsp;&nbsp; = getPosition(targ);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>018</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targWidth&nbsp; = parseInt(targ.offsetWidth);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>019</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targHeight = parseInt(targ.offsetHeight);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>020</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>021</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTargetRectangles.push({</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>022</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">xmin: targPos.x,</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>023</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">xmax: targPos.x + targWidth,</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>024</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">ymin: targPos.y,</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>025</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">ymax: targPos.y + targHeight,</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>026</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTarget: targ</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>027</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">})</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>028</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>029</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>030</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>031</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseUp(ev){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>032</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>033</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">alert(</code><code class="jscript string">"перенесен объект dragObject на акцептор currentDropTarget"</code><code class="jscript plain">)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>034</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOff(currentDropTarget)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>035</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>036</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>037</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>038</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">removeDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>039</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>040</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>041</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getCurrentTarget(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>042</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">for</code><code class="jscript plain">(</code><code class="jscript keyword">var</code> <code class="jscript plain">i=0; i&lt;dropTargetRectangles.length; i++){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>043</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">rect&nbsp; = dropTargetRectangles[i];</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>044</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>045</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code><code class="jscript plain">(</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>046</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageX &gt; rect.xmin)&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>047</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageX &lt; rect.xmax)&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>048</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageY &gt; rect.ymin)&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>049</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageY &lt; rect.ymax)){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>050</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">rect.dropTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>051</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>052</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>053</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>054</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>055</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>056</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>057</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(e){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>058</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>059</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>060</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">with</code><code class="jscript plain">(dragObject.style) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>061</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">position = </code><code class="jscript string">'absolute'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>062</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top = e.pageY - mouseOffset.y + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>063</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left = e.pageX - mouseOffset.x + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>064</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>065</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>066</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">newTarget = getCurrentTarget(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>067</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>068</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget &amp;&amp; currentDropTarget != newTarget) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>069</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOff(currentDropTarget)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>070</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>071</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>072</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">currentDropTarget = newTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>073</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(newTarget) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>074</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOn(newTarget)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>075</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>076</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>077</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code><code class="jscript plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>078</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>079</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>080</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">showRollOn(elem) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>081</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">elem.className = </code><code class="jscript string">'uponMe'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>082</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>083</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>084</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">showRollOff(elem) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>085</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">elem.className = </code><code class="jscript string">''</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>086</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>087</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>088</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>089</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>090</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(e.which!=1) </code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>091</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>092</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject&nbsp; = </code><code class="jscript keyword">this</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>093</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset = getMouseOffset(</code><code class="jscript keyword">this</code><code class="jscript plain">, e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>094</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>095</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">cacheDropTargetRectangles()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>096</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>097</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>098</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>099</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>100</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>101</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>102</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>103</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getMouseOffset(target, e) {...}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>104</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>105</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">addDocumentEventHandlers() {...}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>106</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">removeDocumentEventHandlers() {...}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>107</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>108</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>109</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">...</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>110</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>111</code></td><td class="content"><code class="jscript plain">}())</code></td></tr></tbody></table></div></div></div><div class="syntaxhighlighter collapsed  jscript" id="highlighter_566038"><div class="bar"><div class="toolbar"><a class="item expandSource" style="width: 16px; height: 16px;" title="Показать исходный код" href="#expandSource">Показать исходный код</a><div class="item copyToClipboard"><embed id="highlighter_566038_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_566038" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>001</code></td><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">dragMaster3 = (</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>002</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>003</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>004</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseOffset</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>005</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>006</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dropTargets = []</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>007</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>008</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dropTargetRectangles</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>009</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>010</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">currentDropTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>011</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>012</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">cacheDropTargetRectangles() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>013</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTargetRectangles = []</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>014</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>015</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">for</code><code class="jscript plain">(</code><code class="jscript keyword">var</code> <code class="jscript plain">i=0; i&lt;dropTargets.length; i++){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>016</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targ&nbsp; = dropTargets[i];</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>017</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targPos&nbsp;&nbsp;&nbsp; = getPosition(targ);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>018</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targWidth&nbsp; = parseInt(targ.offsetWidth);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>019</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targHeight = parseInt(targ.offsetHeight);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>020</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>021</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTargetRectangles.push({</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>022</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">xmin: targPos.x,</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>023</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">xmax: targPos.x + targWidth,</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>024</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">ymin: targPos.y,</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>025</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">ymax: targPos.y + targHeight,</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>026</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTarget: targ</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>027</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">})</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>028</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>029</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>030</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>031</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>032</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseUp(ev){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>033</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>034</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">alert(</code><code class="jscript string">"droped dragObject into curTarget"</code><code class="jscript plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>035</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOff(currentDropTarget)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>036</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>037</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>038</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>039</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">removeDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>040</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>041</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>042</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">removeDocumentEventHandlers() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>043</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>044</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>045</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.ondragstart = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>046</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.body.onselectstart = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>047</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>048</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>049</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getMouseOffset(target, e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>050</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">docPos&nbsp; = getPosition(target)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>051</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{x:e.pageX - docPos.x, y:e.pageY - docPos.y}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>052</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>053</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>054</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getCurrentTarget(e) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>055</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">for</code><code class="jscript plain">(</code><code class="jscript keyword">var</code> <code class="jscript plain">i=0; i&lt;dropTargetRectangles.length; i++){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>056</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">rect&nbsp; = dropTargetRectangles[i];</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>057</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>058</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code><code class="jscript plain">(</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>059</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageX &gt; rect.xmin)&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>060</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageX &lt; rect.xmax)&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>061</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageY &gt; rect.ymin)&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>062</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageY &lt; rect.ymax)){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>063</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">rect.dropTarget</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>064</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>065</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>066</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>067</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>068</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>069</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>070</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>071</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(e){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>072</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>073</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>074</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">with</code><code class="jscript plain">(dragObject.style) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>075</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">position = </code><code class="jscript string">'absolute'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>076</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top = e.pageY - mouseOffset.y + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>077</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left = e.pageX - mouseOffset.x + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>078</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>079</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>080</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">newTarget = getCurrentTarget(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>081</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>082</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget &amp;&amp; currentDropTarget != newTarget) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>083</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOff(currentDropTarget)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>084</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>085</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>086</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">currentDropTarget = newTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>087</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(newTarget) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>088</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOn(newTarget)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>089</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>090</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>091</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code><code class="jscript plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>092</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>093</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>094</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">showRollOn(elem) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>095</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">elem.className = </code><code class="jscript string">'uponMe'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>096</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>097</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>098</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">showRollOff(elem) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>099</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">elem.className = </code><code class="jscript string">''</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>100</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>101</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>102</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>103</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>104</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(e.which!=1) </code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>105</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>106</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject&nbsp; = </code><code class="jscript keyword">this</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>107</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset = getMouseOffset(</code><code class="jscript keyword">this</code><code class="jscript plain">, e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>108</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>109</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">cacheDropTargetRectangles()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>110</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>111</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>112</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>113</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>114</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>115</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>116</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">addDocumentEventHandlers() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>117</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = mouseMove</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>118</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = mouseUp</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>119</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>120</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// отменить перенос и выделение текста при клике на тексте</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>121</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.ondragstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>122</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.body.onselectstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>123</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>124</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>125</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>126</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>127</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>128</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">makeDraggable: </code><code class="jscript keyword">function</code><code class="jscript plain">(element){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>129</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.onmousedown = mouseDown</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>130</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">},</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>131</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>132</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDropTarget: </code><code class="jscript keyword">function</code><code class="jscript plain">(dropTarget){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>133</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTargets.push(dropTarget)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>134</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>135</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>136</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>137</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>138</code></td><td class="content"><code class="jscript plain">}())</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>139</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>140</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">getPosition(e){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>141</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">left = 0;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>142</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">top&nbsp; = 0;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>143</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>144</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">while</code> <code class="jscript plain">(e.offsetParent){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>145</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left += e.offsetLeft;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>146</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top&nbsp; += e.offsetTop;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>147</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e&nbsp;&nbsp;&nbsp;&nbsp; = e.offsetParent;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>148</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>149</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>150</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left += e.offsetLeft;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>151</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top&nbsp; += e.offsetTop;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>152</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>153</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{x:left, y:top};</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>154</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><h2 id="otdelyaem-nachalo-drag-n-drop-ot-prostogo-klika" class="header-link"><a href="#otdelyaem-nachalo-drag-n-drop-ot-prostogo-klika">Отделяем начало drag'n'drop от простого клика</a></h2>
<p>Следуя общему принципу отделения мух от котлет - лучше отделить простой клик на объекте от начала drag and drop.</p>
<p>Еще одна причина - дорогая инициализация drag &amp; drop: нужно 
прокешировать все возможные акцепторы. Совершенно не обязательно это 
делать на <code>mousedown</code>, если имеем простой клик.</p>
<p>Как отделить? Очень просто: </p>
<ol>
<li>При <code>mousedown</code> запомнить координаты и объект, но пока не начинать перенос</li>
<li>Если произошло событие <code>mouseup</code> - это был всего лишь клик, сбросить координаты</li>
<li>В <code>mousemove</code> проверить: если есть запомненные координаты и курсор отошел от них хотя бы на 2 пикселя - начать перенос</li>
</ol>
<h3 id="demo-4" class="header-link"><a href="#demo-4">Демо</a></h3>
<p>В коде этой демки стоит расстояние не 2, а 25 пикселей, в целях наглядности происходящего. </p>
<p>До перемещения курсора на 25 пикселей вверх или вниз перенос не начнется.</p>
<p></p><fieldset><br>
<legend>Отрыв от земли - после перемещения на 25 или больше пикселей</legend>
<div id="dragObjects4"><img style="position: absolute; top: 11890px; left: 318px;" src="draganddrop_files/piki.gif"><img style="position: absolute; top: 11889px; left: 201px;" src="draganddrop_files/bubi.gif"><img style="position: absolute; top: 11896px; left: 220px;" src="draganddrop_files/trefi.gif"><img style="position: absolute; top: 11895px; left: 251px;" src="draganddrop_files/chervi.gif"></div>
<p><img src="draganddrop_files/trash.gif" style="margin-left: 100px;" id="trash4"><br>
</p></fieldset>
<script src="draganddrop_files/dropMove2.js"></script><script>
$(document).ready(function() {
        var dragObjects = document.getElementById('dragObjects4').getElementsByTagName('img')
    for(var i=0; i<dragObjects.length; i++) {
        dropMove2.makeDraggable(dragObjects[i])
    }    
    dropMove2.addDropTarget(document.getElementById('trash4'))
    
})
</script><p>
Код демо:</p>
<div class="syntaxhighlighter  jscript" id="highlighter_35691"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_35691_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_35691" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>001</code></td><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">dragMaster = (</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>002</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>003</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">...</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>004</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>005</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseDownAt</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>006</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>007</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>008</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>009</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(e.which!=1) </code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>010</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>011</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseDownAt = { x: e.pageX, y: e.pageY, dragObject: </code><code class="jscript keyword">this</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>012</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>013</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>014</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>015</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>016</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>017</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>018</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(e){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>019</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>020</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>021</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(mouseDownAt) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>022</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(Math.abs(mouseDownAt.x-e.pageX)&lt;25 &amp;&amp; Math.abs(mouseDownAt.y-e.pageY)&lt;25) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>023</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// слишком близко, возможно это клик</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>024</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>025</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>026</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// курсор нажатой мыши отвели далеко - начинаем перенос</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>027</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject&nbsp; = mouseDownAt.dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>028</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset = getMouseOffset(dragObject, mouseDownAt.x, mouseDownAt.y)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>029</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">cacheDropTargetRectangles()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>030</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// запомненные координаты нам больше не нужны</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>031</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseDownAt = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>032</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>033</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>034</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showDrag(e) </code><code class="jscript comments">// показать перенос</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>035</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>036</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code><code class="jscript plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>037</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>038</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>039</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseUp(ev){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>040</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(!dragObject) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>041</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// ничего не начали нести, был просто клик</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>042</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseDownAt = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>043</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">} </code><code class="jscript keyword">else</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>044</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// чего-то несем - обрабатываем конец переноса</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>045</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>046</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">alert(</code><code class="jscript string">"перенесен объект dragObject на акцептор currentDropTarget"</code><code class="jscript plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>047</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOff(currentDropTarget)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>048</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>049</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>050</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>051</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>052</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>053</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// (возможный) drag and drop завершен</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>054</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">removeDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>055</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>056</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>057</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">showDrag(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>058</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// перенести объект</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>059</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">with</code><code class="jscript plain">(dragObject.style) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>060</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">position = </code><code class="jscript string">'absolute'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>061</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top = e.pageY - mouseOffset.y + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>062</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left = e.pageX - mouseOffset.x + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>063</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>064</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>065</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// подсветить акцептор</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>066</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">newTarget = getCurrentTarget(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>067</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>068</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget &amp;&amp; currentDropTarget != newTarget) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>069</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOff(currentDropTarget)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>070</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>071</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>072</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">currentDropTarget = newTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>073</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(newTarget) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>074</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOn(newTarget)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>075</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>076</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>077</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>078</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getMouseOffset(target, x, y) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>079</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// для удобства поменяли синтаксис: x/y вместо event</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>080</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">docPos&nbsp; = getPosition(target)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>081</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{x:x - docPos.x, y:y - docPos.y}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>082</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>083</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>084</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">cacheDropTargetRectangles() {...}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>085</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>086</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">removeDocumentEventHandlers() {...}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>087</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>088</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getCurrentTarget(e) {...}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>089</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>090</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">showRollOn(elem) {...}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>091</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>092</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">showRollOff(elem) {...}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>093</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>094</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">addDocumentEventHandlers() {...}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>095</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>096</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>097</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>098</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">...</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>099</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>100</code></td><td class="content"><code class="jscript plain">}())</code></td></tr></tbody></table></div></div></div><div class="syntaxhighlighter collapsed  jscript" id="highlighter_84378"><div class="bar"><div class="toolbar"><a class="item expandSource" style="width: 16px; height: 16px;" title="Показать исходный код" href="#expandSource">Показать исходный код</a><div class="item copyToClipboard"><embed id="highlighter_84378_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_84378" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>001</code></td><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">dropMove2 = (</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>002</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>003</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>004</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseOffset</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>005</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseDownAt</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>006</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>007</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dropTargets = []</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>008</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>009</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>010</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dropTargetRectangles</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>011</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>012</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">currentDropTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>013</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>014</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">cacheDropTargetRectangles() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>015</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTargetRectangles = []</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>016</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>017</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">for</code><code class="jscript plain">(</code><code class="jscript keyword">var</code> <code class="jscript plain">i=0; i&lt;dropTargets.length; i++){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>018</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targ&nbsp; = dropTargets[i];</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>019</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targPos&nbsp;&nbsp;&nbsp; = getPosition(targ);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>020</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targWidth&nbsp; = parseInt(targ.offsetWidth);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>021</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">targHeight = parseInt(targ.offsetHeight);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>022</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>023</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTargetRectangles.push({</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>024</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">xmin: targPos.x,</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>025</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">xmax: targPos.x + targWidth,</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>026</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">ymin: targPos.y,</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>027</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">ymax: targPos.y + targHeight,</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>028</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTarget: targ</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>029</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">})</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>030</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>031</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>032</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>033</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>034</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseUp(ev){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>035</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(!dragObject) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>036</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseDownAt = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>037</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">} </code><code class="jscript keyword">else</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>038</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>039</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">alert(</code><code class="jscript string">"перенесен объект dragObject на акцептор currentDropTarget"</code><code class="jscript plain">)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>040</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOff(currentDropTarget)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>041</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>042</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>043</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>044</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>045</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>046</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">removeDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>047</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>048</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>049</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">removeDocumentEventHandlers() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>050</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>051</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>052</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.ondragstart = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>053</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.body.onselectstart = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>054</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>055</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>056</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getMouseOffset(target, x, y) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>057</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">docPos&nbsp; = getPosition(target)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>058</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{x:x - docPos.x, y:y - docPos.y}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>059</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>060</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>061</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getCurrentTarget(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>062</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">for</code><code class="jscript plain">(</code><code class="jscript keyword">var</code> <code class="jscript plain">i=0; i&lt;dropTargetRectangles.length; i++){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>063</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">rect&nbsp; = dropTargetRectangles[i];</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>064</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>065</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code><code class="jscript plain">(</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>066</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageX &gt; rect.xmin)&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>067</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageX &lt; rect.xmax)&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>068</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageY &gt; rect.ymin)&nbsp; &amp;&amp;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>069</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">(e.pageY &lt; rect.ymax)){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>070</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">rect.dropTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>071</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>072</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>073</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>074</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>075</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>076</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>077</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>078</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(e){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>079</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>080</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>081</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(mouseDownAt) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>082</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(Math.abs(mouseDownAt.x-e.pageX)&lt;25 &amp;&amp; Math.abs(mouseDownAt.y-e.pageY)&lt;25) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>083</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>084</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>085</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject&nbsp; = mouseDownAt.dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>086</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset = getMouseOffset(dragObject, mouseDownAt.x, mouseDownAt.y)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>087</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">cacheDropTargetRectangles()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>088</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseDownAt = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>089</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>090</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>091</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showDrag(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>092</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>093</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code><code class="jscript plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>094</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>095</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>096</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">showDrag(e) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>097</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>098</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">with</code><code class="jscript plain">(dragObject.style) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>099</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">position = </code><code class="jscript string">'absolute'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>100</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top = e.pageY - mouseOffset.y + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>101</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left = e.pageX - mouseOffset.x + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>102</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>103</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>104</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">newTarget = getCurrentTarget(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>105</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>106</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget &amp;&amp; currentDropTarget != newTarget) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>107</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOff(currentDropTarget)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>108</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>109</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>110</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">currentDropTarget = newTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>111</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(newTarget) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>112</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">showRollOn(newTarget)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>113</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>114</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>115</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>116</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">showRollOn(elem) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>117</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">elem.className = </code><code class="jscript string">'uponMe'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>118</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>119</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>120</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">showRollOff(elem) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>121</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">elem.className = </code><code class="jscript string">''</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>122</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>123</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>124</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>125</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>126</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(e.which!=1) </code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>127</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>128</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseDownAt = { x: e.pageX, y: e.pageY, dragObject: </code><code class="jscript keyword">this</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>129</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>130</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>131</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>132</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>133</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>134</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>135</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">addDocumentEventHandlers() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>136</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = mouseMove</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>137</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = mouseUp</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>138</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>139</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// отменить перенос и выделение текста при клике на тексте</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>140</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.ondragstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>141</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.body.onselectstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>142</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>143</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>144</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>145</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>146</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>147</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">makeDraggable: </code><code class="jscript keyword">function</code><code class="jscript plain">(element){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>148</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.onmousedown = mouseDown</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>149</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">},</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>150</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>151</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDropTarget: </code><code class="jscript keyword">function</code><code class="jscript plain">(dropTarget){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>152</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dropTargets.push(dropTarget)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>153</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>154</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>155</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>156</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>157</code></td><td class="content"><code class="jscript plain">}())</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>158</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>159</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">getPosition(e){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>160</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">left = 0;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>161</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">top&nbsp; = 0;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>162</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>163</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">while</code> <code class="jscript plain">(e.offsetParent){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>164</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left += e.offsetLeft;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>165</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top&nbsp; += e.offsetTop;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>166</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e&nbsp;&nbsp;&nbsp;&nbsp; = e.offsetParent;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>167</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>168</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>169</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">left += e.offsetLeft;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>170</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">top&nbsp; += e.offsetTop;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>171</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>172</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{x:left, y:top};</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>173</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><h2 id="optimizaciya" class="header-link"><a href="#optimizaciya">Оптимизация</a></h2>
<p>Бывает, что возможных акцепторов очень много. Тогда код, кеширующий прямоугольники при начале переноса, будет тормозить.</p>
<p>Визуально это проявляется как задержка от клика на объекте до его 
фактического переноса - потому что долго, с 100% поеданием одного ядра 
CPU обрабатывается <code>mousedown</code>.</p>
<p>Речь тут идет о 100 акцепторах или больше - например, при переносе 
между длинными списками или деревьями. Хотя какие-то тормоза могут быть 
заметны и от 50.</p>
<p>Принципиальных решений здесь два.</p>
<h3 id="smena-sposoba-vychisleniya-koordinat" class="header-link"><a href="#smena-sposoba-vychisleniya-koordinat">Смена способа вычисления координат</a></h3>
<h4 id="document-elementfrompoint-x-y" class="header-link"><a href="#document-elementfrompoint-x-y"><code>document.elementFromPoint(x,y)</code></a></h4>
<p>Этот малоизвестный метод работает во всех браузерах и возвращает элемент по координатам на странице.</p>
<p>Firefox/IE используют для этого <code>clientX/Y</code>, а Opera, Chrome и Safari - <code>pageX/Y</code>. </p>
<p>Возвращенный элемент является самым глубоко вложенным на точке с координатами <code>(x,y)</code>. Это может быть текстовый узел в том числе.<br>
Следуя по цепочке родителей, легко найти нужного акцептора.</p>
<p>На время вызова <code>elementFromPoint</code> необходимо спрятать переносимый элемент, чтобы он не закрывал акцептора.</p>
<p>Псевдокод будет выглядеть так:</p>
<div class="syntaxhighlighter  jscript" id="highlighter_716677"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_716677_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_716677" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">getCurrentTarget(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript plain">dragObject.style.display = </code><code class="jscript string">'none'</code> <code class="jscript comments">// спрятать</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(navigator.userAgent.match(</code><code class="jscript string">'MSIE'</code><code class="jscript plain">) || navigator.userAgent.match(</code><code class="jscript string">'Gecko'</code><code class="jscript plain">)) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// IE || FF</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">elem = document.elementFromPoint(e.clientX,e.clientY)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript plain">} </code><code class="jscript keyword">else</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">elem = document.elementFromPoint(e.pageX,e.pageY)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript plain">dragObject.style.display = </code><code class="jscript string">''</code>&nbsp; <code class="jscript comments">// показать побыстрее</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript keyword">while</code> <code class="jscript plain">(elem!= </code><code class="jscript keyword">null</code><code class="jscript plain">) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(elem является акцептором) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">elem</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">elem = elem.parentNode</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript comments">// не нашли </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><h4 id="vychislenie-po-izvestnym-razmeram" class="header-link"><a href="#vychislenie-po-izvestnym-razmeram">Вычисление по известным размерам</a></h4>
<p>Если структура объекта переноса нам известна - возможно, кешировать каждый элемент ни к чему?</p>
<p>Например, мы переносим объект в список акцепторов:</p>
<div class="syntaxhighlighter  xml" id="highlighter_921744"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_921744_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_921744" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">ul</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"articles-list"</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">li</code><code class="xml plain">&gt;...&lt;/</code><code class="xml keyword">li</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">li</code><code class="xml plain">&gt;...&lt;/</code><code class="xml keyword">li</code><code class="xml plain">&gt; </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">li</code><code class="xml plain">&gt;...&lt;/</code><code class="xml keyword">li</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="xml plain">&lt;/</code><code class="xml keyword">ul</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div></div></div><p>
И мы знаем, что каждый элемент имеет фиксированную высоту и отступы:</p>
<div class="syntaxhighlighter  css" id="highlighter_683257"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_683257_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_683257" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="css plain">.articles-list li {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">20px</code><code class="css plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="css keyword">margin</code><code class="css plain">: </code><code class="css value">0px</code><code class="css plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="css keyword">padding</code><code class="css plain">: </code><code class="css value">0px</code><code class="css plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="css plain">}</code></td></tr></tbody></table></div></div></div><p>
В таком случае, можно вычислить номер LI, разделив общую высоту контейнера на высоту акцептора.</p>
<div class="syntaxhighlighter  jscript" id="highlighter_547484"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_547484_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_547484" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">getCurrentTarget(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">rect = </code><code class="jscript comments">/* ограничивающий прямоугольник для UL */</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript comments">// (ulX, ulY) - координаты относительно верхнего-левого угла контейнера</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">ulX= e.pageX - rect.xmin</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">ulY = e.pageY - rect.ymin</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">( ulX &lt; 0 || ulX &gt; rect.xmax-rect.xmin || ulY &lt; 0 || ulY &gt; rect.ymax-rect.ymin) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/* событие за границами списка */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript comments">/* по 20px на каждого ребенка-акцептора */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">childNum = ulY / 20&nbsp; </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">rect.dropTarget.childNodes[childNum]</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>
Конечно, такая оптимизация возможна не всегда и зависит от конкретной задачи.</p>
<h3 id="ubrat-element-iz-pod-kursora" class="header-link"><a href="#ubrat-element-iz-pod-kursora">Убрать элемент из-под курсора</a></h3>
<p>В ряде задач допустимо не сохранять переносимый элемент под курсором, а передвинуть его на несколько пикселей в сторону, то <code>mouseUp</code> и <code>mouseMove</code> будут срабатывать уже на акцепторе, который станет возможным получить из <code>event.target</code>.</p>
<p>Да, получится не так красиво, но это может быть единственным выходом.</p>
<h3 id="uprostit-obekt-perenosa" class="header-link"><a href="#uprostit-obekt-perenosa">Упростить объект переноса</a></h3>
<p>Можно переносить не сам объект, а его "аватар", схематическое изображение.</p>
<p>Это может быть полезно:</p>
<dl>
<dt>для ускорения отрисовки</dt>
<dd>например, при переносе сложного блока можно переносить такого же размера серый прямоугольник</dd>
<dt>чтобы убрать элемент из-под курсора</dt>
<dd>переносить сам объект в стороне от мыши - может быть некрасиво. А 
обозначить перенос небольшой аватаркой рядом с курсором - уже другое 
дело.</dd>
</dl>
<h2 id="refaktoring" class="header-link"><a href="#refaktoring">Рефакторинг</a></h2>
<p>Код <code>dragMaster</code>'а на текущий момент сочетает весь функционал по отслеживанию переноса, отображению и опусканию на акцептор. </p>
<p>Целесообразно его разделить на три компоненты: переносимые объекты, 
цели переноса (акцепторы) и менеджер, который следит, что куда 
переносится.</p>
<h3 id="dragobject" class="header-link"><a href="#dragobject"><code>DragObject</code></a></h3>
<p>Объект <code>DragObject</code> - обобщенный переносимый объект, который привязывается к DOM-элементу. Он представлен на следующем листинге.</p>
<div class="syntaxhighlighter nogutter  jscript" id="highlighter_581203"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">DragObject(element) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.dragObject = </code><code class="jscript keyword">this</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragMaster.makeDraggable(element)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">rememberPosition</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseOffset</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.onDragStart = </code><code class="jscript keyword">function</code><code class="jscript plain">(offset) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">s = element.style</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">rememberPosition = {top: s.top, left: s.left, position: s.position}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">s.position = </code><code class="jscript string">'absolute'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset = offset</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.hide = </code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.style.display = </code><code class="jscript string">'none'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.show = </code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.style.display = </code><code class="jscript string">''</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.onDragMove = </code><code class="jscript keyword">function</code><code class="jscript plain">(x, y) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.style.top =&nbsp; y - mouseOffset.y +</code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.style.left = x - mouseOffset.x +</code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.onDragSuccess = </code><code class="jscript keyword">function</code><code class="jscript plain">(dropTarget) { }</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.onDragFail = </code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">s = element.style</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">s.top = rememberPosition.top</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">s.left = rememberPosition.left</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">s.position = rememberPosition.position</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.toString = </code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">element.id</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>
Использование:</p>
<div class="syntaxhighlighter nogutter  jscript" id="highlighter_735029"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="jscript keyword">new</code> <code class="jscript plain">DragObject(element)</code></td></tr></tbody></table></div></div></div><p>
Достаточно одного вызова <code>new</code>, т.к функция <code>DragObject</code> добавляет конструируемый объект к <code>element</code> в свойство <code>element.dragObject</code>:</p>
<div class="syntaxhighlighter nogutter  jscript" id="highlighter_554520"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="jscript plain">...</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="jscript plain">element.dragObject = </code><code class="jscript keyword">this</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="jscript plain">...</code></td></tr></tbody></table></div></div></div><p>
Методы:</p>
<dl>
<dt>onDragStart(offset)</dt>
<dd>Вызывается при начале переноса. В текущей реализации отрывает объект "от земли" и запоминает текущую позицию в <code>rememberPosition</code> и сдвиг курсора мыши от левого-верхнего угла объекта в <code>mouseOffset</code>.
<p>В другой реализации может показывать перенос как-то по-другому, например создавать "переносимый клон" объекта.<br>

</p></dd><dt>onDragMove(x, y)</dt>
<dd>Вызывается при переносе объекта в координаты (x,y). Отображает перенос.</dd>
<dt>onDragFail()</dt>
<dd>Обрабатывает неудачный перенос. В текущей реализации возвращает объект на старые координаты. 
<p>Вообще говоря, можно делать это с анимацией, показывая как объект "перелетает" на старое место.
</p></dd><dt>onDragSuccess(dropTarget)</dt>
<dd>Обрабатывает успешный перенос. В текущей реализации обработка успешного переноса целиком сосредоточена у принимающего объекта <code>DropTaget</code>, поэтому эта функция пустая.</dd>
<dt>show/hide()</dt>
<dd>Показать/спрятать переносимый объект - вспомогательные методы</dd>
</dl>
<h3 id="droptarget" class="header-link"><a href="#droptarget"><code>DropTarget</code></a></h3>
<p><code>DropTarget </code>- обобщенный объект-акцептор, потенциальная цель переноса. Может быть большим  контейнером или маленьким элементом - не важно. </p>
<p>Как показано дальше, поддерживаются вложенные <code>DropTarget</code>: объект будет положен туда, куда следует, вне зависимости от степени вложенности.</p>
<div class="syntaxhighlighter nogutter  jscript" id="highlighter_796030"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">DropTarget(element) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.dropTarget = </code><code class="jscript keyword">this</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.canAccept = </code><code class="jscript keyword">function</code><code class="jscript plain">(dragObject) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">true</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.accept = </code><code class="jscript keyword">function</code><code class="jscript plain">(dragObject) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.onLeave()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject.hide()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">alert(</code><code class="jscript string">"Акцептор '"</code><code class="jscript plain">+</code><code class="jscript keyword">this</code><code class="jscript plain">+</code><code class="jscript string">"': принял объект '"</code><code class="jscript plain">+dragObject+</code><code class="jscript string">"'"</code><code class="jscript plain">)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.onLeave = </code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.className =&nbsp; </code><code class="jscript string">''</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.onEnter = </code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.className = </code><code class="jscript string">'uponMe'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">this</code><code class="jscript plain">.toString = </code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">element.id</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>
Методов у <code>DropTarget</code> поменьше, чем у <code>DragObject</code>. Еще бы, акцептору ведь не нужно анимировать собственный перенос.</p>
<dl>
<dt>canAccept(dragObject)</dt>
<dd>При проносе объекта над <code>DropTarget</code>, <code>dragMaster</code> спросит у акцептора, может ли он принять <code>dragObject</code>. Если нет - <code>dragMaster</code> проигнорирует этот акцептор. 
<p>В текущей реализации всегда возвращает <code>true</code>, то есть положить можно. Вообще говоря, может проверять класс переносимого объекта:</p>
<div class="syntaxhighlighter  jscript" id="highlighter_918295"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_918295_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_918295" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="jscript keyword">this</code><code class="jscript plain">.canAccept = </code><code class="jscript keyword">function</code><code class="jscript plain">(dragObject) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// могу принять только объекты типа TreeNodeDragObject </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">dragObject </code><code class="jscript keyword">instanceof</code> <code class="jscript plain">TreeNodeDragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div></dd>
<dt>accept(dragObject)</dt>
<dd>Принимает переносимый объект. Объект может быть перемещен(в другой 
каталог) или уничтожен(корзина) - зависит от вашей логики обработки 
переноса.
<p>В конкретном приложении стоит посмотреть особо, какую часть логики конца переноса стоит поместить <code>DragObject#onDragSuccess</code>, а какую - в <code>DropTarget#accept</code>. Как правило, основную логику переноса удобно сосредоточить у <code>DropTarget</code>.
</p></dd><dt>onLeave/onEnter</dt>
<dd>Анимация возможности положить объект на акцептор. Как правило, 
акцептор при этом подсвечивается. Эти методы будут вызваны только если 
акцептор может принять (<code>canAccept</code>) переносимый объект.</dd>
</dl>
<h3 id="dragmaster" class="header-link"><a href="#dragmaster"><code>dragMaster</code></a></h3>
<p>Ну и, наконец, похудевший и лишенный большинства обязанностей <code>dragMaster</code>.</p>
<div class="syntaxhighlighter nogutter  jscript" id="highlighter_986959"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">dragMaster = (</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">dragObject</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseDownAt</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">currentDropTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(e.which!=1) </code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseDownAt = { x: e.pageX, y: e.pageY, element: </code><code class="jscript keyword">this</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(e){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// (1)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(mouseDownAt) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(Math.abs(mouseDownAt.x-e.pageX)&lt;5 &amp;&amp; Math.abs(mouseDownAt.y-e.pageY)&lt;5) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// Начать перенос</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">elem&nbsp; = mouseDownAt.element</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// текущий объект для переноса</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject = elem.dragObject</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// запомнить, с каких относительных координат начался перенос</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mouseOffset = getMouseOffset(elem, mouseDownAt.x, mouseDownAt.y)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseDownAt = </code><code class="jscript keyword">null</code> <code class="jscript comments">// запомненное значение больше не нужно, сдвиг уже вычислен</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject.onDragStart(mouseOffset) </code><code class="jscript comments">// начали</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// (2)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject.onDragMove(e.pageX, e.pageY)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// (3)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">newTarget = getCurrentTarget(e)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// (4)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget != newTarget) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">currentDropTarget.onLeave()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(newTarget) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">newTarget.onEnter()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">currentDropTarget = newTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// (5)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">mouseUp(){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(!dragObject) { </code><code class="jscript comments">// (1)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseDownAt = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">} </code><code class="jscript keyword">else</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// (2)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(currentDropTarget) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">currentDropTarget.accept(dragObject)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject.onDragSuccess(currentDropTarget)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">} </code><code class="jscript keyword">else</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject.onDragFail()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// (3)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">removeDocumentEventHandlers()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getMouseOffset(target, x, y) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">docPos&nbsp; = getOffset(target)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{x:x - docPos.left, y:y - docPos.top}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">getCurrentTarget(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// спрятать объект, получить элемент под ним - и тут же показать опять</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(navigator.userAgent.match(</code><code class="jscript string">'MSIE'</code><code class="jscript plain">) || navigator.userAgent.match(</code><code class="jscript string">'Gecko'</code><code class="jscript plain">)) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">x=e.clientX, y=e.clientY</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">} </code><code class="jscript keyword">else</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">x=e.pageX, y=e.pageY</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// чтобы не было заметно мигание - максимально снизим время от hide до show</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject.hide()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">elem = document.elementFromPoint(x,y)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject.show()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// найти самую вложенную dropTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">while</code> <code class="jscript plain">(elem) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// которая может принять dragObject </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(elem.dropTarget &amp;&amp; elem.dropTarget.canAccept(dragObject)) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">elem.dropTarget</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">elem = elem.parentNode</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// dropTarget не нашли</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">addDocumentEventHandlers() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = mouseMove</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmouseup = mouseUp</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.ondragstart = document.body.onselectstart = </code><code class="jscript keyword">function</code><code class="jscript plain">() {</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">function</code> <code class="jscript plain">removeDocumentEventHandlers() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.onmousemove = document.onmouseup = document.ondragstart = document.body.onselectstart = </code><code class="jscript keyword">null</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">makeDraggable: </code><code class="jscript keyword">function</code><code class="jscript plain">(element){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.onmousedown = mouseDown</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="jscript plain">}())</code></td></tr></tbody></table></div></div></div><dl>
<dt>mouseDown(e)</dt>
<dd>Метод не изменился. Он запоминает позицию, на которой произошло нажатие кнопки мыши <code>mouseDownAt</code> и добавляет остальные обработчики слежения за переносом <code>addDocumentEventHandlers()</code>.</dd>
<dt>mouseMove(e)</dt>
<dd>Этот обработчик присоединяется к <code>document</code> в момент <code>mouseDown</code>. 
<ol>
<li>
Если в момент его срабатывания есть запомненное нажатие и курсор отошел больше чем на 5 пикселей - значит начался перенос. <code>DragObject'</code>у это сообщается вызовом <code>onDragStart</code> с передачей текущего сдвига курсора относительно левого-верхнего угла <code>mouseOffset</code>.
</li>
<li>Объект информируется о текущих координатах переноса.</li>
<li>Вычисляем текущий акцептор при помощи модифицированного метода <code>getCurrentTarget</code> (см. выше в разделе "Оптимизация").</li>
<li>Обработать нового акцептора и уход со старого акцептора.</li>
<li>Вернуть <code>false</code> для блокирования действий браузера и всплывания события <code>mouseMove</code></li>
</ol>
</dd>
<dt>mouseUp()</dt>
<dd>Этот обработчик завершает (возможный) перенос. Обратите внимание - 
само событие в данном случае не нужно. Весь процесс переноса 
отслеживается событием <code>mouseMove</code>.
<ol>
<li>Если объект переноса не установлен, значит перед этим было простое нажатие <code>mouseDown</code>, элемент не отнесли на 5 пикселей в сторону - это не drag'n'drop.</li>
<li>При наличии акцептора - перенос успешно завершается, если акцептора нет - отменяется.</li>
<li>В любом случае в конце все обработчики с документа снимаются</li>
</ol>
</dd></dl>
<p>Функция определения позиции элемента <code>getPosition</code> заменена на более точный вариант <code>getOffset</code>, описанный в статье <a href="http://javascript.ru/ui/offset">про определение координат</a>.</p>
<h2 id="itogovyy-drag-n-drop-freymvork" class="header-link"><a href="#itogovyy-drag-n-drop-freymvork">Итоговый Drag'n'Drop фреймворк</a></h2>
<p>Скачать пакет из итогового фреймворка и демок можно <a href="http://javascript.ru/files/dnd/final.zip">здесь</a>. </p>
<p>В комплекте - пара демок.  На этой странице обе подключены в iframe'ах.</p>
<h3 id="obychnyy-perenos" class="header-link"><a href="#obychnyy-perenos">Обычный перенос</a></h3>
<p><a href="http://javascript.ru/files/dnd/final/demo.html" target="_blank">Открыть в отдельном окне: demo.html</a></p>
<p><iframe style="border: 1px solid black; width: 300px; height: 100px;" src="draganddrop_files/demo.htm"></iframe></p>
<h3 id="vlozhennye-akceptory" class="header-link"><a href="#vlozhennye-akceptory">Вложенные акцепторы</a></h3>
<p>В этой демке акцепторами являются два вложенных DIV'а.</p>
<p><a href="http://javascript.ru/files/dnd/final/nested.html" target="_blank">Открыть в отдельном окне: nested.html</a></p>
<p><iframe style="border: 1px solid black; width: 300px; height: 250px;" src="draganddrop_files/nested.htm"></iframe></p>
<h3 id="nekotorye-dopolnitelnye-recepty" class="header-link"><a href="#nekotorye-dopolnitelnye-recepty">Некоторые дополнительные рецепты</a></h3>
<h4 id="peremeshcheniya-akceptorov-v-processe-perenosa" class="header-link"><a href="#peremeshcheniya-akceptorov-v-processe-perenosa">Перемещения акцепторов в процессе переноса</a></h4>
<p>В процессе переноса акцепторы объекты могут сдвигаться, освобождая место. </p>
<p>Если вы используете кеш координат акцепторов, то при этом 
производится соответствующее обновление кеша, но вместо полного 
перевычисления обновляются только координаты сдвинувшихся объектов. </p>
<p>Например, при раздвижении списка вниз - увеличиваются Y-координаты всех сдвинувшихся LI.<br>
При этом для удобного обновления кеш делается не массивом, а объектом с 
доступом по ID элемента, так чтобы можно было легко обновить именно 
нужные координаты.</p>
<h4 id="drag-and-drop-mezhdu" class="header-link"><a href="#drag-and-drop-mezhdu">Drag and drop "между".</a></h4>
<p>Иногда, например, при смене позиции элемента в списке, объект 
переносится не на акцептор, а между акцепторами. Как правило, "между" - 
имеется в виду по высоте.</p>
<p>Для этого логику определения <code>currentDropTarget</code> нужно поменять. Возможно два варианта:</p>
<dl>
<dt>Допустим перенос как между, так и над</dt>
<dd>В этом случае акцептор делится на 3 части по высоте <code>clientHeight</code>: 25% - 50% - 25%, и определяется попадание координаты события на нужную часть.</dd>
<dt>Перенос только между</dt>
<dd>Акцептор делится на две части: 50% - 50%</dd>
</dl>
<p>Кроме того, в дополнение к текущему акцептору <code>currentDropTarget</code> добавляется флаг, обозначающий, куда относительно акцептора происходит перенос.</p>
<p>Индикацию "переноса между" удобнее всего делать либо раздвижением элементов, либо показом полосы-индикатора <code>border-top/border-bottom</code>, как показано на рисунке ниже:</p>
<p><img src="draganddrop_files/between.png" width="196" height="178"> </p>
<h4 id="animaciya-otmeny-perenosa" class="header-link"><a href="#animaciya-otmeny-perenosa">Анимация отмены переноса</a></h4>
<p>Обычно при переносе объекта куда-либо посетитель может просто отпустить его в любом месте. </p>
<p>При этом drag and drop фреймворк анимирует отмену переноса. Один из 
частых вариантов - скольжение объекта обратно к исходному месту, откуда 
его взяли.<br>
Конечно, для этого исходное место необходимо запомнить.</p>
<p>Если перетаскивается аватарка(клон), то можно его и просто уничтожить.</p>
<h4 id="proverka-prav" class="header-link"><a href="#proverka-prav">Проверка прав</a></h4>
<p>Совершенно не факт, что любой объект можно перенести на любой аксептор.<br>
Как правило, все с точностью наоборот.</p>
<p>Акцептор может быть недоступен по двум причинам:</p>
<ul>
<li>либо это несовпадение типов, для этого drag and drop должен 
предусматривать различные типы объектов/акцепторов и проверку их 
соответствия</li>
<li>либо у посетителя недостаточно для этого прав, в рамках наложенных CMS ограничений</li>
</ul>
<p>При переносе над недоступным акцептором - <code>getCurrentTarget</code> просто возвращает null.</p>
<p>Иногда проверку прав и результата переноса необходимо делать на сервере. Как правило, такую проверку выполняют только при <code>mouseUp</code>, чтобы не нагружать сервер излишними запросами во время <code>mouseMove</code>.</p>
<p>Здесь используется два подхода </p>
<dl>
<dt>Синхронный XmlHttpRequest</dt>
<dd>Запрос отправляется синхронно, чтобы не нарушать общий поток 
выполнения. Все хорошо, вот только браузер видимо подвисает при 
отпускании кнопки мыши. Да и другие недостатки у синхронного запроса 
есть.</dd>
<dt>Отложенная отмена переноса</dt>
<dd>Более продвинутый и удобный вариант. Основан на "оптимистичном" сценарии, по которому перенос, как правило, проходит успешно.
<ol>
<li>Посетитель кладет объект туда, куда он хочет.</li>
<li>Фреймворк перемещает объект, и затем "в фоне" делает асинхронный запрос к серверу. На запрос вешается <code>callback</code>, содержащий информацию, откуда был перенесен объект.</li>
<li>Сервер обрабатывает перенос и возвращает ответ, все ли в порядке.</li>
<li>Если нет - <code>callback</code> выводит ошибку и объект возвращается туда, откуда был перенесен.</li>
</ol>
</dd>
</dl>
<h2 id="rezyume" class="header-link"><a href="#rezyume">Резюме</a></h2>
<p>Вы узнали основные принципы и особенности реализации drag and drop в яваскрипт. </p>
<p>Рассмотрели ряд оптимизаций и различные организации переноса на уровне UI.</p>
<p>Все современные javascript-библиотеки используют описанную схему и какие-то (не все) из оптимизаций. </p>
<p>Пакет из итогового фреймворка и демок доступен <a href="http://javascript.ru/files/dnd/final.zip">здесь</a>. </p>



	
	</td>
</tr>
<tr>
<td>




<div style="float: right; height: 20px; line-height: 20px;">
	<ul class="links"><li class="first last book_printer"><a href="http://javascript.ru/book/export/html/1593" title="Показать версию этой статьи со всеми дочерними статьями в виде, удобном для печати." class="book_printer">версия для печати</a></li>
</ul>
</div>

</td>
</tr>
</tbody></table>
<br>


<div class="sibling-navigation"><div class="page-links clear-block"><a class="sibling-navigation-prev" href="http://javascript.ru/ui">« Интерфейсы</a><a class="sibling-navigation-up" href="http://javascript.ru/ui">Уровень выше</a><a class="sibling-navigation-next" href="http://javascript.ru/ui/tree">Грамотное javascript-дерево за 7 шагов »</a></div></div>

<div id="comments"><a id="comment-1420"></a>
<table class="comment-table tborder comment-author-0" id="comment-1420" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: chrysalis (не зарегистрирован), дата: 28 апреля, 2009 - 16:54
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1420">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1420">
	

<div class="comment-body">
	<p>А просто использование jQuery.ui.sortable не нравится?<br>
Или статья именно в обучающих цельях? Тогда, конечно, классно - полезно будет.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1420" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1423"></a>
<table class="comment-table tborder comment-author-1" id="comment-1423" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 28 апреля, 2009 - 18:16
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1423">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1423">
	

<div class="comment-body">
	<p>Использование jQuery.ui.sortable, а также Dojo draggable, а также 
других существующих библиотек есть гуд. Другое дело, что они не всегда 
соответствуют решаемой задаче, занимают больше места, да и вообще 
полезно понимать, что происходит.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1423" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1431"></a>
<table class="comment-table tborder comment-author-1616" id="comment-1431" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/milk3dfx" title="Информация о пользователе.">milk3dfx</a>, дата: 29 апреля, 2009 - 23:16
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1431">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1431">
	

<div class="comment-body">
	<p>Эх, много бы время мне сэкономила эта статья выйдя на пол года 
раньше=) Облазил я тогда всё но кроме простых примеров ни чего не нашёл.
 Раньше я использовал script.aculo и прототип, для проекта где было 
много перетаскиваемых объектов, что сказать мне не хватило ее 
функциональности. Не было в ней событий которые вызывались в тот момент 
когда перетаскиваемый объект начинал заходить и уходить в область drop 
объекта=) пришлось добавит только предварительно поняв как там всё это 
устроенно. Вот живой пример. Для простых целей он конечно же подходят.<br>
События которые  отображающие весь процесс это:<br>
onStartDrag()<br>
onStopDrag()<br>
onDrag()</p>
<p>onStartHover()<br>
onHover()<br>
onStopHover()<br>
onDrop()<br>
И если их сделать тогда вам больше не чего не придётся дописывать</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1431" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1433"></a>
<table class="comment-table tborder comment-author-1" id="comment-1433" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 30 апреля, 2009 - 13:05
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1433">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1433">
	

<div class="comment-body">
	<p>Все это легко делается..<br>
Можно даже добавить это в нужную библиотеку, если понимать, что и как там работает.</p>
<p>А статья как раз это и описывает. </p>
<p>UPDATED: добавил в статью раздел про рефакторинг с событиями.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1433" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1437"></a>
<table class="comment-table tborder comment-author-1616" id="comment-1437" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/milk3dfx" title="Информация о пользователе.">milk3dfx</a>, дата: 30 апреля, 2009 - 21:16
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1437">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1437">
	

<div class="comment-body">
	<p>Да без условно это хорошая и нужная статья.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1437" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div></div></div></div><a id="comment-1448"></a>
<table class="comment-table tborder comment-author-113" id="comment-1448" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Dmitry-A.-Soshnikov" title="Информация о пользователе.">Dmitry A. Soshnikov</a>, дата: 2 мая, 2009 - 16:44
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1448">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1448">
	

<div class="comment-body">
	<p>Хорошая статья.</p>
<p>Пустую false-функцию для <em>document.ondragstart</em> и <em>document.body.onselectstart</em> тоже можно сделать одну, а не создавать каждый раз при mouseup'e:</p>
<div class="syntaxhighlighter  jscript" id="highlighter_447905"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_447905_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_447905" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="jscript keyword">var</code> <code class="jscript plain">emptyFalseFn = </code><code class="jscript keyword">function</code><code class="jscript plain">() { </code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code> <code class="jscript plain">};</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="jscript plain">...</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="jscript plain">document.ondragstart = emptyFalseFn;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="jscript plain">document.body.onselectstart = emptyFalseFn;</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1448" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1538"></a>
<table class="comment-table tborder comment-author-0" id="comment-1538" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Nicholas (не зарегистрирован), дата: 17 мая, 2009 - 20:05
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1538">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1538">
	

<div class="comment-body">
	<p>Третий день изучаю js, для того что бы заменить формы html на "Drag and Drop" , дабы изменять переменные не перегружая страницу.</p>
<p>Какой метод лучше использовать для этой цели (для FF2) ваш первый или <a href="http://elouai.com/javascript-drag-and-drop.php" title="http://elouai.com/javascript-drag-and-drop.php" class="liexternal">http://elouai.com/javascript-drag-and-drop.php</a> ?<br>
("Демо улучшенного метода" в FF2 под Linux не работает).</p>
<p>Если я "перетащил" div с определенным ID  в определенную область - 
как мне лучше  запустить произвольную функцию, передав ей этот ID ?</p>
<p>Спасибо.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1538" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1542"></a>
<table class="comment-table tborder comment-author-1" id="comment-1542" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 18 мая, 2009 - 10:57
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1542">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1542">
	

<div class="comment-body">
	<p>В Firefox 2 вполне может не работать. Используйте Firefox 3, а то Firefox 4 пропустите <img src="draganddrop_files/wink.gif" title="" alt=""></p>
<p>UPDATE: используйте Firefox 3.5 <img src="draganddrop_files/smile.gif" title="" alt=""></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1542" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-1599"></a>
<table class="comment-table tborder comment-author-0" id="comment-1599" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Ax (не зарегистрирован), дата: 27 мая, 2009 - 06:39
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1599">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1599">
	

<div class="comment-body">
	<p>Статья очень крутая.</p>
<p>Больше всего в это статье мне нравится не сама описываемая в ней 
тема, хотя и она интересна сама по себе, а то, как автор оперирует ОО 
подходом применительно к JS. Использует много интересных приемов и 
главное не отдельно, а непосредственно решая задачу.</p>
<p>Т.е. если он использует обработчик событий, то это не статья об обработчиках, а статья где показано практическое его применение.</p>
<p>И вообще, автор талантлив. Я считаю, что это идеальный обучающий 
материал. Хотя некоторые моменты не совсем раскрыты, но это вполне 
верно, так как статья не о них.<br>
Большое спасибо за качественный материал.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1599" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1613"></a>
<table class="comment-table tborder comment-author-0" id="comment-1613" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 28 мая, 2009 - 14:36
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1613">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1613">
	

<div class="comment-body">
	<p>отмечаю что статья не доведена до логического конца в зугрузку 
необходимо добавить не только JS, но и маленький html где используется 
данный скирпт. тогда вопросов<br>
"Может кто подскажет как использовать???Ну есть у меня этот котроллер.и 
есть объект, допустим div id="im".Как применить к нему это все???"<br>
 возникать не будет. к сожаленю этим страдает не только эта статья здесь.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1613" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1615"></a>
<table class="comment-table tborder comment-author-1" id="comment-1615" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 28 мая, 2009 - 14:41
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1615">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1615">
	

<div class="comment-body">
	<p>Добавлю пример.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1615" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1623"></a>
<table class="comment-table tborder comment-author-0" id="comment-1623" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Ax (не зарегистрирован), дата: 29 мая, 2009 - 06:05
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1623">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1623">
	

<div class="comment-body">
	<p>Пример, конечно, не помешал бы, но.</p>
<p>У меня есть мнение, что изучать программирование и его основы нужно 
не с этой статьи. Поэтому такие моменты как банальное не знание HTML или
 не понимание общих принципов программирования как такого (не говоря об 
ООП), это, в конечном счете, не проблема автора. Цель данной статьи 
объяснить и принципы, а не дать рабочий пример. Если нужен механизм, то 
нужно читать не статьи, а документацию библиотек, а лучше базовый курс.</p>
<p>А от вопросов: - "Где в javascript C++?" и  - "Как добавить на страницу <i>этот</i> форум?", никуда не деться.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1623" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1630"></a>
<table class="comment-table tborder comment-author-1" id="comment-1630" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 30 мая, 2009 - 23:04
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1630">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1630">
	

<div class="comment-body">
	<p>Расширил статью, добавил итоговый вариант после рефакторинга и демо.<br>
Сделал общий скачиваемый архив.</p>
<p>Кода, как всегда, мало. Все чистенько, понятненько, юзабельно.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1630" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-1631"></a>
<table class="comment-table tborder comment-author-0" id="comment-1631" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 31 мая, 2009 - 10:54
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1631">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1631">
	

<div class="comment-body">
	<p>Отличная статья. Все хорошо расписано и понятно. Для определенных 
сайтов драг-энд-дроп сильно повысит интерактивность управления (к 
примеру кидать товары в магазине в тележку).</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1631" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1682"></a>
<table class="comment-table tborder comment-author-0" id="comment-1682" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: zir05 (не зарегистрирован), дата: 4 июня, 2009 - 20:57
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1682">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1682">
	

<div class="comment-body">
	<p>Всегда привлекала тема drag and drop - в javascript автору благодарность</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1682" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1685"></a>
<table class="comment-table tborder comment-author-0" id="comment-1685" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 5 июня, 2009 - 12:36
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1685">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1685">
	

<div class="comment-body">
	<p>Спасибо огромное! Теперь я знаю, как решить свою задачу! <img src="draganddrop_files/smile.gif" title="" alt=""></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1685" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1689"></a>
<table class="comment-table tborder comment-author-0" id="comment-1689" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 5 июня, 2009 - 14:39
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1689">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1689">
	

<div class="comment-body">
	<p>зачот</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1689" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1690"></a>
<table class="comment-table tborder comment-author-0" id="comment-1690" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Жандос (не зарегистрирован), дата: 5 июня, 2009 - 14:59
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1690">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1690">
	

<div class="comment-body">
	<p>Автор а почему драг и дропятся? шутка<br>
Отличная статья огромное спасибо</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1690" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1691"></a>
<table class="comment-table tborder comment-author-0" id="comment-1691" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 5 июня, 2009 - 15:09
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1691">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1691">
	

<div class="comment-body">
	<p>Спасибо, все доступно и понятно даже для человека посредственно знающего javascript.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1691" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1692"></a>
<table class="comment-table tborder comment-author-0" id="comment-1692" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: illusions (не зарегистрирован), дата: 5 июня, 2009 - 18:27
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1692">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1692">
	

<div class="comment-body">
	<p>Статья просто отличная - на 5+.<br>
Хотя в таких случаях стараюсь использовать готовое - тот же jQuery.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1692" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1696"></a>
<table class="comment-table tborder comment-author-0" id="comment-1696" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Nicholas (не зарегистрирован), дата: 6 июня, 2009 - 00:36
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1696">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1696">
	

<div class="comment-body">
	<p>1. Новые примеры из раздела "Итоговый Drag'n'Drop фреймворк" 
работают в FF2 странно - при нажатии и move на пиксел сразу исчезают.<br>
(в FF3 не проверял, пропустить FF4 не боюсь <img src="draganddrop_files/smile.gif" title="" alt=""><br>
В начале статьи похожие примеры работают правильно.</p>
<p>2. Вы, конечно, хорошо дополнили статью, но ссылку на "используемую 
литературу" все таки стоит дать (тем более что она проще и тоже может 
быть полезной):<br>
<a href="http://www.webreference.com/programming/javascript/mk/column2/" title="http://www.webreference.com/programming/javascript/mk/column2/" class="liexternal">http://www.webreference.com/programming/javascript/mk/column2/</a></p>
<p>3. Было бы интересно увидеть продолжение - про то как работать с 
состаными div - (картинка, подпись, пара кнопок - все как div-слои с 
z-index составного div "appendChild(Div)") там не все очевидно (по 
крайней мере я сейчас с этим бьюсь), и про та как, в этом случае, лучше 
делать интерфейс самого сайта на div - что бы одно другому не мешело и 
d&amp;d не глючил.</p>
<p>Спасибо.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1696" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1697"></a>
<table class="comment-table tborder comment-author-0" id="comment-1697" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: AVE (не зарегистрирован), дата: 6 июня, 2009 - 12:17
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1697">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1697">
	

<div class="comment-body">
	<p>Козырная статья</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1697" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1699"></a>
<table class="comment-table tborder comment-author-0" id="comment-1699" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: unnamed (не зарегистрирован), дата: 6 июня, 2009 - 17:03
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1699">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1699">
	

<div class="comment-body">
	<p>Неплохо было было добавить реакцию на скролл. А то если во время 
перетаскивания прокрутить колесо мыши, то объект замирает в 
первоначальной позиции и потом при малейшем движении рывком прыгает в 
новое место. Не очень красиво, правда? Также часто делают автоскролл при
 поднесении объекта к краю экрана.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1699" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1700"></a>
<table class="comment-table tborder comment-author-1" id="comment-1700" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 6 июня, 2009 - 22:40
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1700">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1700">
	

<div class="comment-body">
	<p>Да, реакция на скролл и правда не разобрана. Возможно, со временем допишу.</p>
<p>Автопрокрутку делают отслеживанием координат мыши - если у края окна/контейнера то вызывается прокрутка.</p>
<p>По самому событию скролла, чтобы все обработать ок - нужно определить, на сколько прокрутили - и апдейтнуть позицию..</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1700" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-1704"></a>
<table class="comment-table tborder comment-author-0" id="comment-1704" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 8 июня, 2009 - 12:05
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1704">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1704">
	

<div class="comment-body">
	<p>Все это очень замечательно, но для действительно полноценного 
drag'n'drop'а следует рассмотреть еще много-много интересного. Итак:</p>
<p>1. Вы совершенно не учитываете возможность наличия других 
обработчиков mousemove/mouseup, которые могут сделать 
stopPropagation/cancelBubble, и Ваш drag'n'drop никогда не кончится. Во 
избежание этой ситуации обработчики mousemove/mouseup следует навешивать
 С КАПЧУРИНГОМ на document: document.addEventListener('mousemove', 
callback, true). В IE для тех же целей необходимо установить setCapture 
на таскаемый элемент.</p>
<p>2. Вы не учитываете возможность прерывания таскания, например, по 
alt+tab, одновременному нажатию нескольких кнопок мыши или выходу 
курсора за пределы документа.</p>
<p>3. Есть очень скользкий момент с тем, что после mouseup приходит 
событие click, которое, вообще говоря, логически вовсе не click - если 
по клику выполняется какое-то другое действие, то оно после драггинга 
очевидно выполняться не должно. Поэтому надо в определенных ситуациях 
слушать приходящий следом click и отменять его.</p>
<p>Это только верхушка айсберга на самом деле. Там еще море всевозможных
 тонкостей, особенно с разными странными браузерами типа Оперы 9.2 и 
Сафари под Мак.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1704" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1705"></a>
<table class="comment-table tborder comment-author-0" id="comment-1705" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 8 июня, 2009 - 13:07
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1705">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1705">
	

<div class="comment-body">
	<p>И кстати, если говорить про jQuery, его стандартная таскалка про все это тоже ничего не знает.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1705" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1706"></a>
<table class="comment-table tborder comment-author-0" id="comment-1706" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 8 июня, 2009 - 13:09
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1706">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1706">
	

<div class="comment-body">
	<p>И кстати, в FF2 Ваши примеры не работают.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1706" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1707"></a>
<table class="comment-table tborder comment-author-1" id="comment-1707" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 8 июня, 2009 - 14:33
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1707">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1707">
	

<div class="comment-body">
	<p>В FF2 мои примеры не работают и не будут. Как и в Opera 7. Динозаврам место в музеях.</p>
<p>P.S. Легко можно сделать, чтоб работали, 2 строки кода поправить. Но может не надо а? <img src="draganddrop_files/wink.gif" title="" alt=""></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1707" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1708"></a>
<table class="comment-table tborder comment-author-0" id="comment-1708" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 8 июня, 2009 - 18:03
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1708">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1708">
	

<div class="comment-body">
	<p>FF2 использует примерно 2% пользователей - не так уж и мало. Больше 
чем Сафари под Мак, например. То же касается Оперы 9.27. А эти два 
браузера не отслеживают выход мыши за пределы документа (т.е. в строку 
меню браузера, например).</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1708" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1713"></a>
<table class="comment-table tborder comment-author-1" id="comment-1713" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 8 июня, 2009 - 21:21
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1713">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1713">
	

<div class="comment-body">
	<p>Выход мыши за пределы документа особенно резкий - вообще нельзя отследить, как и отпускание кнопки там. Можно только</p>
<p>1) Попробовать предусмотреть такой нестандарт и не глюкануть сильно<br>
2) Иметь в виду, что пользователь, который так делает, обычно морально готов к глюкам.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1713" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1723"></a>
<table class="comment-table tborder comment-author-0" id="comment-1723" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 11 июня, 2009 - 13:26
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1723">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1723">
	

<div class="comment-body">
	<p>В приципе FF3 событие onmouseup ловит за пределами окна (если 
конечно мышь туда перемещается в нажатом состоянии. Ну и может дело в 
том что в своей реализации D&amp;D я вешаю обработчики через 
addEventListener/attachEvent, чтобы не мешать другим).</p>
<p>А вот у IE с этим проблема (использую 6ую версию). Событие onmouseup 
ловится за пределами окна только в том случае если нет обработчиков в 
стиле document.body.onselectstart = funtion(e) {return false;}. Т.е. 
если работает выделение и мы его не трогаем.</p>
<p>Поэтому для того чтобы, D&amp;D корректно прекращался, а не 
продолжался после того как кнопка была отпущена "за пределами", 
необходимо ловить document.[body.]onmouseover и прекращать его если не 
нажать левая кнопка мыши. Кстати у вас в примерах такой эффект 
присутствует. D&amp;D продолжается если отжать мышь за пределами 
ограничивающего контейнера.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1723" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-1783"></a>
<table class="comment-table tborder comment-author-0" id="comment-1783" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 20 июня, 2009 - 15:43
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1783">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1783">
	

<div class="comment-body">
	<p>В FF2 вполне можно отследить выход курсора за пределы окна, через 
relatedTarget. В IE надо делать setCapture на нужный элемент и слушать 
событие onlosecapture.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1783" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div></div></div></div></div></div><a id="comment-1781"></a>
<table class="comment-table tborder comment-author-0" id="comment-1781" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 20 июня, 2009 - 12:58
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1781">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1781">
	

<div class="comment-body">
	<p>в статье ещё не рассмотрен случай, когда элемент перетаскивается за 
его часть (например окно за заголовок) и не написано про обработку 
вытаскивания элемента за пределы окна</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1781" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1938"></a>
<table class="comment-table tborder comment-author-0" id="comment-1938" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Aube (не зарегистрирован), дата: 16 июля, 2009 - 03:32
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1938">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1938">
	

<div class="comment-body">
	<p>Хорошая статья. Наткнулся на нее когда писал свой drag'n'drop, уже 
почти все написал, осталось только определить над каким элементом 
находится курсор при onMouseUp и ответ как это сделать был найден именно
 тут.<br>
На счет выхода курсора за пределы окна, контроля последующего клика, 
реакции на alt+tab.. Это уже похоже на попытку контроля хаоса. Ну в 
крайнем случае можно сделать отмену перетаскивания, если курсор мыши 
долго не меняет свои координаты. Впрочем даже это кажется мне излишним.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1938" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1970"></a>
<table class="comment-table tborder comment-author-0" id="comment-1970" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Алексей Кучеренко (не зарегистрирован), дата: 20 июля, 2009 - 22:17
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1970">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1970">
	

<div class="comment-body">
	<p>Автору большое спасибо за проделанный труд. Читал с удовольствием</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/1970" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-2005"></a>
<table class="comment-table tborder comment-author-0" id="comment-2005" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: a2l (не зарегистрирован), дата: 31 июля, 2009 - 16:34
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2005">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2005">
	

<div class="comment-body">
	<p>Спасибо за статью.</p>
<p>Чтобы я мог полностью использовать все преимущества этого скрипта - подскажите, как перетаскивать не картинку, а ее копию?<br>
Хочу на базе вашей реализации сделать драг н дроп товаров в корзину.<br>
Надо:<br>
1. Взять мышей картинку.<br>
2. Перетянуть ее на корзину.<br>
При этом изображение товара - должно статично, а перетягиваться копия изображения</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2005" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-2006"></a>
<table class="comment-table tborder comment-author-1" id="comment-2006" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 31 июля, 2009 - 16:57
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2006">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2006">
	

<div class="comment-body">
	<p>Нужно модифицировать код отображения перетаскивания и код завершения drag and drop.</p>
<p>Об этом неоднократно упоминается в статье.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2006" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-2007"></a>
<table class="comment-table tborder comment-author-0" id="comment-2007" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: a2l (не зарегистрирован), дата: 31 июля, 2009 - 17:28
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2007">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2007">
	

<div class="comment-body">
	<p>Если не трудно - подскажите.<br>
У меня есть опыт программирования.<br>
Но в некоторых вещах я несилен.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2007" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div></div><a id="comment-2016"></a>
<table class="comment-table tborder comment-author-105" id="comment-2016" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Andrej-Paranichev" title="Информация о пользователе.">Андрей Параничев</a>, дата: 4 августа, 2009 - 16:21
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2016">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2016">
	

<div class="comment-body">
	<p>Нужно отметить, что можно столкнуться с ситуацией, когда 
перетаскиваемый элемент находится в контейнере с абсолютной или 
относительной позицией. </p>
<p>Поскольку в скрипте отсчет позиции идет от x: 0, y: 0 для body, то 
такой элемент, при перетаскивании, будет появляться не в месте, где мы 
его "схватили", а с соответствующим смещением (между "нулями" body и 
родительского позиционированного элемента). Поскольку "правильное" 
определение элемента с позиционированием может стоить ресурсов, лучше 
при перетаскивании делать клон элемента, подсоединяя его к контейнеру 
body, таким образом обходя вышеуказанную проблему и возможную проблему с
 вложенностью.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2016" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-2119"></a>
<table class="comment-table tborder comment-author-0" id="comment-2119" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Альберт (не зарегистрирован), дата: 30 августа, 2009 - 11:26
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2119">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2119">
	

<div class="comment-body">
	<p>Уважаемый Илья Кантор! Огромное спасибо Вам за этот ресурс, 
по-моему, это лучшее, что есть по javascript. Все информация излагается 
доступно, с логикой развития, полно, с наглядными работающими красивыми 
примерами!!! Потрясающе!</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2119" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-2120"></a>
<table class="comment-table tborder comment-author-1" id="comment-2120" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 30 августа, 2009 - 15:43
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2120">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2120">
	

<div class="comment-body">
	<p>Может, сделать отдельный тип комментариев "спасибо" ? Конечно, я 
рад, что мой труд кому-то пригодился, но такие комментарии не добавляют 
полезности статье..</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2120" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-2211"></a>
<table class="comment-table tborder comment-author-0" id="comment-2211" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Nix (не зарегистрирован), дата: 22 сентября, 2009 - 10:36
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2211">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2211">
	

<div class="comment-body">
	<p>Спасибо автору, фреймворк очень компактный.<br>
Правда процессор грузит в среднем также как jQuery.ui Drag&amp;Drop. Использовать не так удобно как jQuery.ui<br>
Для повышения удобства и универсальности достаточно вынести функцию 
обработки дропа из фреймворка на пользовательскую страницу, как это 
сделано в jQuery.ui</p>
<div class="syntaxhighlighter  xml" id="highlighter_232977"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_232977_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_232977" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="xml plain">$(document).ready(function(){</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$("#draggable").draggable();</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$("#droppable").droppable({</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">drop: function() { alert('dropped'); }</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="xml plain">});</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>8</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div></div></div><p>
Как это сделать догадается далеко не каждый.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2211" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-2216"></a>
<table class="comment-table tborder comment-author-1" id="comment-2216" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 22 сентября, 2009 - 23:08
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2216">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2216">
	

<div class="comment-body">
	<p>Добрый день,</p>
<p>Статья совсем не ставит целью заменить jquery ui, dojo dijit и прочие
 фреймворки. Конечно, вы можете адаптировать код под свои нужды или 
адаптировать поправить тот же jquery ui, используя информацию из статьи.</p>
<p>Успехов вам.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2216" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-2213"></a>
<table class="comment-table tborder comment-author-0" id="comment-2213" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Hurley (не зарегистрирован), дата: 22 сентября, 2009 - 17:34
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2213">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2213">
	

<div class="comment-body">
	<p>Здраствуйте, очень много нового для меня в этой статье! Дочитал пока
 до параграфа "Опускаем элемент" а уже возникло несколько вопросов:</p>
<p>1. не понятен синтаксис</p>
<p> e.which = e.button &amp; 1 ? 1 : ( e.button &amp; 2 ? 3 : ( e.button &amp; 4 ? 2 : 0 ) )</p>
<p>это же одно и то же что и выражение ниже?</p>
<p>if (e.button==true &amp; 1)<br>
{<br>
e.which = 1<br>
}<br>
else<br>
{<br>
( e.button &amp; 2 ? 3 : ( e.button &amp; 4 ? 2 : 0 ) )<br>
}</p>
<p>как расшифровать <strong>( e.button &amp; 2 ? 3 : ( e.button &amp; 4 ? 2 : 0 ) )</strong> ???</p>
<p>2. Это ошибка чи нет? <img src="draganddrop_files/smile.gif" title="" alt=""> Подпараграф "Начало движения: сохранение позиции курсора в элементе"</p>
<p>document.onmousemove = function(e) {<br>
    e = fixEvent(e)<br>
    ...<br>
    element.style.left = e.pageX + mouseOffset.x + 'px'<br>
    element.style.top = e.pageY + mouseOffset.y  + 'px'<br>
    ...<br>
}</p>
<p>Должно быть наверное ж</p>
<p>document.onmousemove = function(e) {<br>
    e = fixEvent(e)<br>
    ...<br>
    element.style.left = e.pageX - mouseOffset.x + 'px'<br>
    element.style.top = e.pageY - mouseOffset.y  + 'px'<br>
    ...<br>
}</p>
<p>3. Подпараграф "Демо"</p>
<p>var dragMaster = (</p>
<p>	function() {</p>
<p>        ...код...</p>
<p>	}   <strong>()</strong><br>
)</p>
<p>для чего выделенные жирным скобки?</p>
<p>4. Интересна функция getPosition, понятно что все работает и этого 
должно быть мне достаточно:), но если не сложно можете объяснить 
некоторые моменты:</p>
<p>    while (e.offsetParent){<br>
        left += e.offsetLeft<br>
        top  += e.offsetTop<br>
        e     = e.offsetParent<br>
    }</p>
<p>Допустим есть такая конструкция</p>
<p>&lt;div class="test"&gt;<br>
  &lt;div id="dragElem"&gt;<br>
  &lt;/div&gt;<br>
&lt;/div&gt;</p>
<p>В файрбаге я смотрю по dom модели, что свойство offsetParent для дива dragElem  = div.test</p>
<p>делаю так</p>
<p>while (e.offsetParent){<br>
        left += e.offsetLeft<br>
        top  += e.offsetTop<br>
        e     = e.offsetParent<br>
        alert(e.offsetParent)<br>
    }</p>
<p>и он мне выводит первый раз [object HTMLBodyElement], а второй раз null </p>
<p>что это за прикол? кроссбраузерные глюки?</p>
<p>Заранее спасибо</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2213" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-2393"></a>
<table class="comment-table tborder comment-author-1" id="comment-2393" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 14 октября, 2009 - 15:25
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2393">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2393">
	

<div class="comment-body">
	<p>1. Добавил комментарий об этом в статью. &amp; - это логическое И.<br>
2. Да, опечатка, поправил.<br>
3. Таким образом мы объявляем и тут же создаем объект-синглтон.<br>
4. Что непонятного? IE выводит что-то другое? Вы берете элемент, у 
которого нет offsetParent (родительского по offset элемента). 
Естественно, выходит null...</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2393" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-2409"></a>
<table class="comment-table tborder comment-author-0" id="comment-2409" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: mailman (не зарегистрирован), дата: 16 октября, 2009 - 05:41
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2409">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2409">
	

<div class="comment-body">
	<p>Насчет поправки к скролингу, можно примерно так:</p>
<div class="syntaxhighlighter  jscript" id="highlighter_634509"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_634509_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_634509" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">mouseMove(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript comments">// ...</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript plain">xPos = parseInt((e) ? e.pageX : event.clientX + document.body.scrollLeft);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript plain">yPos = parseInt((e) ? e.pageY : event.clientY + document.body.scrollTop);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;</code><code class="jscript comments">// ...</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2409" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-2410"></a>
<table class="comment-table tborder comment-author-1" id="comment-2410" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 16 октября, 2009 - 08:26
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2410">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2410">
	

<div class="comment-body">
	<p>С виду - ошибочка: <code>(e) ? e.pageY : event.clientY</code>  --- переменная e всегда задана после fixEvent.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2410" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-2428"></a>
<table class="comment-table tborder comment-author-0" id="comment-2428" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: mailman (не зарегистрирован), дата: 17 октября, 2009 - 08:18
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2428">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2428">
	

<div class="comment-body">
	<p>Да, упистил там, я имел в виду, что те две строчки эквивалентны 
fixEvent, такое может быть? Точнее по части контроля за скролами.</p>
<p>Что будет если на эту страницу поместить iframe - как будут себя вести перетаскиваемые элементы при перемещении над ним?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2428" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-2439"></a>
<table class="comment-table tborder comment-author-2454" id="comment-2439" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/BVladi" title="Информация о пользователе.">B~Vladi</a>, дата: 19 октября, 2009 - 15:27
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2439">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2439">
	

<div class="comment-body">
	<p>Не указан один важный момент. Для Драг&amp;Дропа <strong>необходимо</strong>
 заставлять браузер перерисовывать страницу при mouseover. Это в 
библиотеке просисходит, но для других целей. Заставить перерисовать 
страницу можно простым обращением к свойству DOM-элемента, которое 
заставит браузер что-то вычислить:</p>
<div class="syntaxhighlighter nogutter  jscript" id="highlighter_219929"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="jscript plain">ele.offsetTop</code></td></tr></tbody></table></div></div></div><p>Не
 все свойства DOM-элемента подходят для этого, например style.top, т.к. 
это по-сути всего лишь получение уже установленного значения. В сложный 
интерфейсах этот момент может сыграть чуть ли не самую важную роль.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/2439" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3107"></a>
<table class="comment-table tborder comment-author-0" id="comment-3107" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 13 января, 2010 - 09:36
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3107">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3107">
	

<div class="comment-body">
	<p>Доброго времени суток. Столкнулся с проблемой неправильного 
размещения обьекта после перетаскивания. Возможно комуто понадобиться 
пример с подменой перемещаемого объекта. Таким образом перемещается его 
клон, а сам обьект остаётся на месте (в последнем примере расказывается 
как его скрыть).<br>
Для того, что бы зделать такое вам необходимо в начало тэга  поместить контэйнер для клона </p>
<div class="syntaxhighlighter nogutter  xml" id="highlighter_975861"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">style</code><code class="xml plain">=</code><code class="xml string">"position:absolute;z-index:9999;display:block;"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"temp_drag"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div></div></div><p> Затем поправить свойства <strong>onDragStart</strong> и <strong>onDragFail</strong> и внести функцию клонирования. <strong>onDragStart</strong> и <strong>onDragFail</strong> полностью заменить. Реализация:</p>
<div class="syntaxhighlighter  jscript" id="highlighter_319541"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_319541_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_319541" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">this</code><code class="jscript plain">.onDragStart = </code><code class="jscript keyword">function</code><code class="jscript plain">(offset)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="jscript plain">{&nbsp;&nbsp; </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">save_id = element.getAttribute(</code><code class="jscript string">"id"</code><code class="jscript plain">);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">copy(</code><code class="jscript string">"temp_drag"</code><code class="jscript plain">,element.id);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.setAttribute(</code><code class="jscript string">"id"</code><code class="jscript plain">,element.id+</code><code class="jscript string">"_temp"</code><code class="jscript plain">);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element = document.getElementById(save_id);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">s = element.style;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">rememberPosition = {top: s.top, left: s.left, position: s.position}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">s.position = </code><code class="jscript string">'absolute'</code><code class="jscript plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset = offset;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="jscript keyword">this</code><code class="jscript plain">.onDragFail = </code><code class="jscript keyword">function</code><code class="jscript plain">()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.getElementById(save_id).style.display=</code><code class="jscript string">'none'</code><code class="jscript plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element = document.getElementById(save_id+</code><code class="jscript string">"_temp"</code><code class="jscript plain">);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.setAttribute(</code><code class="jscript string">"id"</code><code class="jscript plain">,save_id);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>И куданибуть в конец всего скрипта вот эту функцию:</p>
<div class="syntaxhighlighter  jscript" id="highlighter_224173"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_224173_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_224173" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">copy(container,copy)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="jscript plain">{&nbsp;&nbsp; </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">selectCont = document.getElementById(container);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">oneChild;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">mainObj = document.getElementById(container);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">while</code> <code class="jscript plain">(mainObj.childNodes.length &gt; 0)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">oneChild = mainObj.lastChild;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mainObj.removeChild(oneChild);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">select = document.getElementById(copy);&nbsp;&nbsp;&nbsp;&nbsp; </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">newSelect = select.cloneNode(</code><code class="jscript keyword">true</code><code class="jscript plain">);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">selectCont.appendChild(newSelect);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript plain">select;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>При
 желании можно скрывать обьект который якобы перетаскивается двумя 
способами, либо вызвать перерисовку испульзуя display:none; или просто 
зделать невидимым, участвующем в построении страницы visibility:hidden. 
Пример:</p>
<div class="syntaxhighlighter  jscript" id="highlighter_286980"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_286980_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_286980" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">this</code><code class="jscript plain">.onDragStart = </code><code class="jscript keyword">function</code><code class="jscript plain">(offset)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">{&nbsp;&nbsp; </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">save_id = element.getAttribute(</code><code class="jscript string">"id"</code><code class="jscript plain">);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">copy(</code><code class="jscript string">"temp_drag"</code><code class="jscript plain">,element.id).style.visibility=</code><code class="jscript string">"hidden"</code><code class="jscript plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/*Либо так</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">copy("temp_drag",element.id).style.display="none";*/</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.setAttribute(</code><code class="jscript string">"id"</code><code class="jscript plain">,element.id+</code><code class="jscript string">"_temp"</code><code class="jscript plain">);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element = document.getElementById(save_id);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">s = element.style;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">rememberPosition = {top: s.top, left: s.left, position: s.position}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">s.position = </code><code class="jscript string">'absolute'</code><code class="jscript plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseOffset = offset;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>Незабудте в <strong>onDragFail</strong> показать скрытый обьект</p>
<div class="syntaxhighlighter  jscript" id="highlighter_933661"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_933661_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_933661" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="jscript keyword">this</code><code class="jscript plain">.onDragFail = </code><code class="jscript keyword">function</code><code class="jscript plain">()</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">document.getElementById(save_id).style.display=</code><code class="jscript string">'none'</code><code class="jscript plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element = document.getElementById(save_id+</code><code class="jscript string">"_temp"</code><code class="jscript plain">);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.setAttribute(</code><code class="jscript string">"id"</code><code class="jscript plain">,save_id);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">element.style.</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">/*либо display='block'; или visibility='visible'; смотря каким способом вы его скрыли */</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>8</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3107" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3203"></a>
<table class="comment-table tborder comment-author-0" id="comment-3203" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: серж (не зарегистрирован), дата: 22 января, 2010 - 10:31
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3203">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3203">
	

<div class="comment-body">
	<p>Респект автору.<br>
Статья Супер.<br>
но, столкнулся с проблемой:<br>
есть div, для которого я делаю dragMaster.makeDraggable, но внутри этого
 div'а есть textarea, которая при клике перестала получать фокус<br>
Подскажите пожалуйста, как это побороть</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3203" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3204"></a>
<table class="comment-table tborder comment-author-5029" id="comment-3204" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/mycoding" title="Информация о пользователе.">mycoding</a>, дата: 22 января, 2010 - 12:19
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3204">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3204">
	

<div class="comment-body">
	<p>А можно попросить автора, сменить изображения картинок от карт.<br>
Конечно это не моё дело, но я карты терпеть не могу, и по этой причине даже читать статью не хочу, хотя статья супер.<br>
Очень буду благодарен, если Илья Кантор это сделает.<br>
Например, очень бы подошли картинки футбольного и баскетбольного мячей и коньков.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3204" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-3206"></a>
<table class="comment-table tborder comment-author-0" id="comment-3206" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 22 января, 2010 - 15:13
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3206">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3206">
	

<div class="comment-body">
	<p>ну вы, батенька, про коньки то загнули ^^.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3206" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3305"></a>
<table class="comment-table tborder comment-author-0" id="comment-3305" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: spender (не зарегистрирован), дата: 30 января, 2010 - 23:29
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3305">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3305">
	

<div class="comment-body">
	<p>не, коньки тоже отстой - я на них плохо катаюсь, даже ваш 
комментарий не захотел сперва читать как только увидел это слово (правда
 потом заставил себя сделать это). Поэтому нужно либо проводить 
референдум по этому вопросу (что бы большинству угодить), либо что бы 
автор сделал форму загрузки картинок для демки (что бы всем угодить). 
Ему же наверняка делать нечего!</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3305" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-3391"></a>
<table class="comment-table tborder comment-author-0" id="comment-3391" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: scoute (не зарегистрирован), дата: 10 февраля, 2010 - 12:52
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3391">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3391">
	

<div class="comment-body">
	<p>Да уж, перетаскивание клона картинки - полезная штука,<br>
а можно ли выложить полный код? А то изменения применил,<br>
но не работает ...<br>
то картинку вообще сдвинуть нельзя, то днд отключается,<br>
и картинка тянется браузером, а не скриптом.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3391" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3422"></a>
<table class="comment-table tborder comment-author-0" id="comment-3422" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Сударчиков Андрей (не зарегистрирован), дата: 15 февраля, 2010 - 17:43
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3422">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3422">
	

<div class="comment-body">
	<p>Здравствуйте!<br>
Спасибо <img src="draganddrop_files/smile.gif" title="" alt=""> полезно, применяю.<br>
Есть вопрос:<br>
У меня перетаскиваемый объект содержит html код (текст картинки и т.д.) 
он в контейнере table td. (таблицей нарисовано обрамление содержания)<br>
В js новичОк, не могу сделать так чтобы таскать только за область границы вокруг.<br>
При этом по mousedown на контенте контейнера не таскать но выделять текст.<br>
вот пример<br>
<a href="http://webpokaz.ru/media/test/testgallery.html" title="http://webpokaz.ru/media/test/testgallery.html" class="liexternal">http://webpokaz.ru/media/test/testgallery.html</a><br>
И еще одно, после нескольких внесенных исправлений повесил ИЕ...<br>
В этой версии, при том что локально все работает, выложил в нет и ИЕ повис.<br>
Рассмотрите пожалуйста мой пример. Очень надеюсь на вашу помощь</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3422" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-3525"></a>
<table class="comment-table tborder comment-author-0" id="comment-3525" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: sldizz (не зарегистрирован), дата: 23 февраля, 2010 - 17:58
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3525">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3525">
	

<div class="comment-body">
	<p>Я только что столкнулся с данной проблемой - мне необходимо было иметь возможность перетаскивать всплывающее окошко:</p>
<div class="syntaxhighlighter  xml" id="highlighter_333753"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_333753_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_333753" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"popup"</code> <code class="xml color1">style</code><code class="xml plain">=</code><code class="xml string">"border: solid 1px #000000;"</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"dTitle"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"dTitle"</code><code class="xml plain">&gt;Popup&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"dBody"</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">p</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"dText"</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">The
 relevant FIX connections are setup in the FIX Gateway b/w the FIX 5.0 
VeriFIX receiver (outbound) and RTNS GID.logs (inbound)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">The
 relevant FIX connections are setup in the FIX Gateway b/w the FIX 5.0 
VeriFIX receiver (outbound) and RTNS GID.logs (inbound)</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">p</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">button</code> <code class="xml color1">style</code><code class="xml plain">=</code><code class="xml string">"clear:both;"</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"button"</code> <code class="xml color1">onClick</code><code class="xml plain">=</code><code class="xml string">"layerClose();"</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">Close</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">button</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;&lt;</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="xml plain">dragMaster.makeDraggable(document.getElementById('dTitle'))</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="xml plain">&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div></div></div><p>Так
 вот, для того, чтобы беспроблемно таскать это всплывающее окошко, я 
просто подставил в вызове не его само, а его хэдер, т.е. в данном случае
 <strong>dTitle</strong>, а в самом скрипте сделал так:</p>
<div class="syntaxhighlighter  jscript" id="highlighter_777163"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_777163_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_777163" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="jscript plain">...</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(e.which!=1) </code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dragObject&nbsp; = </code><code class="jscript keyword">this</code><code class="jscript plain">.parentNode; </code><code class="jscript comments">// изначально было dragObject&nbsp; = this</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="jscript plain">...</code></td></tr></tbody></table></div></div></div><p>
В моем случае помогло, надеюсь, поможет и вам</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3525" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-3744"></a>
<table class="comment-table tborder comment-author-0" id="comment-3744" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Netic (не зарегистрирован), дата: 25 марта, 2010 - 20:54
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3744">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3744">
	

<div class="comment-body">
	<p>я тут задумался, интересно, как можно сделать так, задать акцептеру например класс объектов, которые он может принимать</p>
<p>например:</p>
<div class="syntaxhighlighter nogutter  jscript" id="highlighter_990556"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="jscript keyword">new</code> <code class="jscript plain">DropTarget(objElement1, </code><code class="jscript string">'items'</code><code class="jscript plain">);</code></td></tr></tbody></table></div></div></div><p>
типа того, т.е. акцептер object будет принимать в себя только объекты имеющие класс items</p>
<p>точно так же, объектом которым мы говорим драгиться, что им можно располагаться тока в акцептеры </p>
<div class="syntaxhighlighter nogutter  jscript" id="highlighter_24667"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="jscript keyword">new</code> <code class="jscript plain">DragObject(objItem, </code><code class="jscript string">'element1'</code><code class="jscript plain">);</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3744" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-3873"></a>
<table class="comment-table tborder comment-author-0" id="comment-3873" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 16:28
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3873">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3873">
	

<div class="comment-body">
	<p>Всего лишь проверять перед тем или иным действием свойство className объекта.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3873" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-3934"></a>
<table class="comment-table tborder comment-author-0" id="comment-3934" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: dimanlin (не зарегистрирован), дата: 23 апреля, 2010 - 00:45
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3934">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3934">
	

<div class="comment-body">
	<p>Вот эщто действительно хорошая статья по переносу объектов.! <img src="draganddrop_files/smile.gif" title="" alt="">  респект!</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3934" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3969"></a>
<table class="comment-table tborder comment-author-2626" id="comment-3969" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/hoid" title="Информация о пользователе.">hoid</a>, дата: 29 апреля, 2010 - 00:58
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3969">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3969">
	

<div class="comment-body">
	<p>Здесь возвращается позиция элемента относительно документа</p>
<div class="syntaxhighlighter  jscript" id="highlighter_170151"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_170151_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_170151" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">getPosition(e){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="jscript plain">62&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code class="jscript keyword">var</code> <code class="jscript plain">left = 0</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="jscript plain">63&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code class="jscript keyword">var</code> <code class="jscript plain">top&nbsp; = 0</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="jscript plain">64&nbsp;&nbsp; </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="jscript plain">65&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code class="jscript keyword">while</code> <code class="jscript plain">(e.offsetParent){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="jscript plain">66&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left += e.offsetLeft</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="jscript plain">67&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top&nbsp; += e.offsetTop</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="jscript plain">68&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e&nbsp;&nbsp;&nbsp; = e.offsetParent</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="jscript plain">69&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="jscript plain">70&nbsp;&nbsp; </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="jscript plain">71&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left += e.offsetLeft</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="jscript plain">72&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top&nbsp; += e.offsetTop</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="jscript plain">73&nbsp;&nbsp; </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="jscript plain">74&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code class="jscript keyword">return</code> <code class="jscript plain">{x:left, y:top}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="jscript plain">75&nbsp; }</code></td></tr></tbody></table></div></div></div><p>
а тут элементу назначаются координаты относительно родительского элемента</p>
<div class="syntaxhighlighter  jscript" id="highlighter_590663"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_590663_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_590663" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="jscript keyword">with</code><code class="jscript plain">(dragObject.style) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="jscript plain">26&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position = </code><code class="jscript string">'absolute'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="jscript plain">27&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top = e.pageY - mouseOffset.y + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="jscript plain">28&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left = e.pageX - mouseOffset.x + </code><code class="jscript string">'px'</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="jscript plain">29&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</code></td></tr></tbody></table></div></div></div><p>
и если задать родительскому элементу position, перетаскиваемый прыгает<br>
в исходном файле demo.html я приписал позицию для дива</p>
<div class="syntaxhighlighter  xml" id="highlighter_384047"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_384047_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_384047" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">html</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">body</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"/forum/DragObject.js"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"/forum/DropTarget.js"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"/forum/dragMaster.js"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"/forum/helpers.js"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">style</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="xml plain">.uponMe { background-color: red; }</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="xml plain">&lt;/</code><code class="xml keyword">style</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"dragObjects"</code> <code class="xml plain">&lt;em&gt;style="position:absolute; left: 400px; top: 400px"&lt;/</code><code class="xml keyword">em</code><code class="xml plain">&gt;&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"/forum/img/piki.gif"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"piki"</code><code class="xml plain">/&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"/forum/img/bubi.gif"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"bubi"</code><code class="xml plain">/&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"/forum/img/trefi.gif"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"trefi"</code><code class="xml plain">/&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"/forum/img/chervi.gif"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"chervi"</code><code class="xml plain">/&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"/forum/img/trash.gif"</code> <code class="xml color1">style</code><code class="xml plain">=</code><code class="xml string">"margin-left:100px"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"trash"</code><code class="xml plain">/&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="xml plain">&lt;</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="xml plain">onload = function() {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">var dragObjects = document.getElementById('dragObjects').getElementsByTagName('img')</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">for(var i=0; i&lt;</code><code class="xml keyword">dragObjects.length</code><code class="xml plain">; i++) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">new DragObject(dragObjects[i])</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">new DropTarget(document.getElementById('trash'))</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>28</code></td><td class="content"><code class="xml plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>29</code></td><td class="content"><code class="xml plain">&lt;/script&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>30</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>31</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>32</code></td><td class="content"><code class="xml plain">&lt;/</code><code class="xml keyword">body</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>33</code></td><td class="content"><code class="xml plain">&lt;/</code><code class="xml keyword">html</code><code class="xml plain">&gt;</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3969" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3985"></a>
<table class="comment-table tborder comment-author-7051" id="comment-3985" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Rast-security" title="Информация о пользователе.">Rast-security</a>, дата: 30 апреля, 2010 - 22:42
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3985">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3985">
	

<div class="comment-body">
	<p>так и чешутся руки скрипты украсть!</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/3985" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4082"></a>
<table class="comment-table tborder comment-author-0" id="comment-4082" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 16 мая, 2010 - 19:11
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4082">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4082">
	

<div class="comment-body">
	<p>Здравствуйте!) Статья очень помогла, подогнал под основные браузеры,
 только вот Natscape Navigator ведёт себя очень странно...Может Вы 
знаете, чем вызвано такое поведение?)<br>
 P.S. версия 9.0.0.6</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4082" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4132"></a>
<table class="comment-table tborder comment-author-0" id="comment-4132" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Макс M (не зарегистрирован), дата: 19 мая, 2010 - 13:34
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4132">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4132">
	

<div class="comment-body">
	<p>если мы кликаем над input IE - всё, ок а Opera, Safari - не даёт в поле input выделять текст и фокус не возвращает<br>
Вставил в ouseDown(e)</p>
<div class="syntaxhighlighter  jscript" id="highlighter_909053"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_909053_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_909053" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">if</code> <code class="jscript plain">(elem.tagName) </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code><code class="jscript plain">(elem.tagName==</code><code class="jscript string">'INPUT'</code><code class="jscript plain">) </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">{ </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(!el.focus) </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">elem.focus(); </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code><code class="jscript plain">; </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4132" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4133"></a>
<table class="comment-table tborder comment-author-0" id="comment-4133" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Макс M (не зарегистрирован), дата: 19 мая, 2010 - 13:36
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4133">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4133">
	

<div class="comment-body">
	<p>Полный JS решение проблемы с input ами</p>
<div class="syntaxhighlighter  jscript" id="highlighter_100918"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_100918_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_100918" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="jscript keyword">function</code> <code class="jscript plain">mouseDown(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e = fixEvent(e);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(e.which!=1) </code><code class="jscript keyword">return</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mouseDownAt = { x: e.pageX, y: e.pageY, element: </code><code class="jscript keyword">this</code> <code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">elem = document.elementFromPoint(mouseDownAt.x,mouseDownAt.y);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript comments">// запрет на перемещение input</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(elem.tagName) </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code><code class="jscript plain">(elem.tagName==</code><code class="jscript string">'INPUT'</code><code class="jscript plain">) </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">{ </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(!el.focus) </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">elem.focus(); </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code><code class="jscript plain">; </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">addDocumentEventHandlers();</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">return</code> <code class="jscript keyword">false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4133" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4135"></a>
<table class="comment-table tborder comment-author-0" id="comment-4135" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Виталий Филиппов (не зарегистрирован), дата: 19 мая, 2010 - 18:04
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4135">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4135">
	

<div class="comment-body">
	<p>Статья действительно супер, но добавлю пару замечаний.<br>
Во-первых, по поводу pageX/Y и clientX/Y: Chrome и Opera 10.5 уже тоже 
использует clientX/Y, по крайней мере с ним всё работает корректно. Для 
Opera &lt; 10.5 действительно требуется pageX/Y, но это, по-видимому, 
единственное исключением из правила, т.к. Opera 10.5 с pageX/Y уже 
работает некорректно при прокрутке страницы. Как себя ведёт Safari - не 
смотрел, но учитывая, что это тоже WebKit, подозреваю, что тоже может 
работать с clientX/Y.<br>
А в Konqueror'е, например, вообще нет метода elementFromPoint. Чем бы его заменить?<br>
Во-вторых, по поводу объектной модели DragObject: те методы, которые у 
вас "onXXX", я бы назвал просто "xXX", и добавил бы в них if 
(this.onXXX) onXXX(...), чтобы легче было добавлять в объект обработчики
 событий. И кроме того, по умолчанию сделал бы восстановление позиции 
элемента при успешном drag&amp;drop'е, если пользователь захочет - нехай
 переопределяет.<br>
В-третьих, по поводу используемых локальных переменных - мне кажется 
логичнее их засунуть в объект (не var element, а this.element = ...), 
чтобы потом их легко было достать из тех же обработчиков событий, 
например.<br>
С этими доработками получается уже вполне приличная, но в то же время лёгкая библиотека для drag&amp;drop'а)<br>
<a href="http://svn.yourcmc.ru/viewvc.py/vitaphoto/branch/solstice/diz-vitaphoto/DragHelpers.js?revision=1121&amp;view=co" title="DragHelpers.js" class="liexternal">DragHelpers.js</a><br>
<a href="http://svn.yourcmc.ru/viewvc.py/vitaphoto/branch/solstice/diz-vitaphoto/DragHelpers.js?revision=1121&amp;view=co" title="DragObject.js" class="liexternal">DragObject.js</a><br>
<a href="http://svn.yourcmc.ru/viewvc.py/vitaphoto/branch/solstice/diz-vitaphoto/DragHelpers.js?revision=1121&amp;view=co" title="DragMaster.js" class="liexternal">DragMaster.js</a><br>
<a href="http://svn.yourcmc.ru/viewvc.py/vitaphoto/branch/solstice/diz-vitaphoto/DragHelpers.js?revision=1121&amp;view=co" title="DropTarget.js" class="liexternal">DropTarget.js</a></p>
<p>P.S: тут в редакторе во "вставке ссылки" не работает текст, вставляется ссылка без текста внутри.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4135" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4287"></a>
<table class="comment-table tborder comment-author-0" id="comment-4287" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Маэстро (не зарегистрирован), дата: 8 июня, 2010 - 13:34
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4287">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4287">
	

<div class="comment-body">
	<p>Илья, спасибо за умную статью. На основе Вашего материала построил свой сайт.<br>
Но вот столкнулся с проблемой: если перетаскиваемый объект (в примере картинка img/piki.gif) заключены в html-ссылку, например:<br>
[a target=_blank href=http://mysite.com][img src="/forum/img/piki.gif" id="piki"/][/a]<br>
то после перетаскивания такой картинки броузеры ведут себя по-разному.<br>
В частности, Google Hrome после перетаскивания открывает новую вкладку, 
т.е. отрабатывает тег [a]. Как бы предотвратить это? То есть, клик по 
картинке должен отправлять пользователя по адресу, указанному в href... 
Но если пользователь только переместил картинку, то перехода быть НЕ 
должно.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4287" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4288"></a>
<table class="comment-table tborder comment-author-0" id="comment-4288" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Маэстро (не зарегистрирован), дата: 8 июня, 2010 - 13:52
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4288">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4288">
	

<div class="comment-body">
	<p>Виталию Филиппову:<br>
в Вашем сообщении все ссылки указывают на один и тот же файл DragHelpers.js<br>
как скачать другие?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4288" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4290"></a>
<table class="comment-table tborder comment-author-0" id="comment-4290" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Маэстро (не зарегистрирован), дата: 8 июня, 2010 - 13:57
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4290">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4290">
	

<div class="comment-body">
	<p>Илья, спасибо за умную статью. На основе Вашего материала построил свой сайт.<br>
Но вот столкнулся с проблемой: если перетаскиваемый объект (в примере картинка img/piki.gif) заключены в html-ссылку, например:<br>
(a target=_blank href=http://mysite.com)(img src="/forum/img/piki.gif" id="piki"/)(/a)<br>
то после перетаскивания такой картинки броузеры ведут себя по-разному.<br>
В частности, Google Hrome после перетаскивания открывает новую вкладку, т.е. отрабатывает тег (a).<br>
Как бы предотвратить это? То есть, клик по картинке должен отправлять 
пользователя по адресу, указанному в href... но если пользователь только
 переместил картинку, то перехода быть НЕ должно.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4290" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-4535"></a>
<table class="comment-table tborder comment-author-1" id="comment-4535" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 16 июля, 2010 - 17:39
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4535">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4535">
	

<div class="comment-body">
	<p>Чтобы перехода не было - нужно отменять реакцию браузера по умолчанию для события на элементе <code>a</code> используя preventDefault.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4535" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-4328"></a>
<table class="comment-table tborder comment-author-0" id="comment-4328" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 14 июня, 2010 - 00:02
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4328">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4328">
	

<div class="comment-body">
	<p>Использую эти скрипты для DnD. Очень сильно грузять процессор. Под 
FF и Chrome еще как-то шевелятся(95%), а под IE вначале перетаскивания 
проц загружается на 100% и по этой причине объект не визуализируется, 
ему просто некогда. Это происходит даже если после начала движения 
просто остановить мышку но не отпускать левую клавишу. Постоянно 
срабатывает событие mousemove, хотя движения мышкой нет. В чем может 
быть причина? Если не победю придется на другой фреймоворк переходить, а
 это месяц отладки.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4328" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-4536"></a>
<table class="comment-table tborder comment-author-1" id="comment-4536" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 16 июля, 2010 - 17:40
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4536">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4536">
	

<div class="comment-body">
	<p>Очень странно что событие mousemove срабатывает без движения мышкой. Не бывает такого..</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4536" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-4669"></a>
<table class="comment-table tborder comment-author-0" id="comment-4669" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Enpire (не зарегистрирован), дата: 3 августа, 2010 - 11:30
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4669">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4669">
	

<div class="comment-body">
	<p>Мне кажется, что к проверке прав второго типа (асинхронный запрос) 
надо добавить предварительную проверку прав на всех объектах, которые 
могут быть перетаскиваемыми, на этапе формирования страницы (PHP).</p>
<p>Например, если у нас есть сотня объектов трех типов, мы можем 
выделить эти типы. И у нас есть авторизованный (или неавторизованный, 
гость) пользователь, у которого есть права. Для каждого типа объектов 
проверяются права на перенос - да, нет. Всего лишь булевая переменная, 
которая добавляется в свое свойство объекту. Таким образом мы отсекаем 
бОльшую часть "отбракованных" переносов еще до их совершения. Кстати 
абсолютное большинство "отбракованных" переносов будет говорить о 
попытках изменить что то в коде страницы и получить доступ к запрещенным
 элементам: если проект - онлайн-игра, такому пользователю можно 
выносить предупреждение, и знать, что от него можно ждать попыток 
эксплоитов и багоюзерства =)</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4669" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4745"></a>
<table class="comment-table tborder comment-author-7954" id="comment-4745" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/e.kubyshin" title="Информация о пользователе.">e.kubyshin</a>, дата: 11 августа, 2010 - 14:32
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4745">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4745">
	

<div class="comment-body">
	<p>сдается мне что если dran-n-drop элемент будет находится в блоке с 
position:relative, то не правильное поведение будет при перемещениии</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4745" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4791"></a>
<table class="comment-table tborder comment-author-8303" id="comment-4791" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/MikhailGirshberg" title="Информация о пользователе.">MikhailGirshberg</a>, дата: 19 августа, 2010 - 10:27
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4791">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4791">
	

<div class="comment-body">
	<p>Safari не дропает в примерах итогового фреймворка...</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4791" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4797"></a>
<table class="comment-table tborder comment-author-4044" id="comment-4797" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: <a href="http://javascript.ru/person/GreatRash" title="Информация о пользователе.">GreatRash</a>, дата: 19 августа, 2010 - 12:38
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4797">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4797">
	

<div class="comment-body">
	<p>В этом коде ошибка:</p>
<div class="syntaxhighlighter  jscript" id="highlighter_34021"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_34021_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_34021" menu="false" src="draganddrop_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="jscript comments">// добавить which для IE</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code> <code class="jscript plain">(!e.which &amp;&amp; e.button) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">e.which = e.button &amp; 1 ? 1 : ( e.button &amp; 2 ? 3 : ( e.button &amp; 4 ? 2 : 0 ) )</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></td></tr></tbody></table></div></div></div><p>условие не срабатывает в ИЕ8 и ИЕ8(в режиме ИЕ7).</p>
<p>Извиняюсь, ошибся. Надо было проверять mousedown, а не click.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/4797" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-5186"></a>
<table class="comment-table tborder comment-author-0" id="comment-5186" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Pol_uha (не зарегистрирован), дата: 7 октября, 2010 - 10:35
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-5186">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_5186">
	

<div class="comment-body">
	<p>Спасибо за статью!<br>
Но вот глюк...<br>
Взял за основу пример с 2-мя вложенными дивами.<br>
если на странице с примером появляется полоса прокрутки вниз<br>
То в Opera прокрутив чуть чуть и попробовав перенести, меняется позиция 
droptarget, а именно становится выше реального((( Подскажите?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/5186" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-5259"></a>
<table class="comment-table tborder comment-author-0" id="comment-5259" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Kostya (не зарегистрирован), дата: 14 октября, 2010 - 23:18
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-5259">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_5259">
	

<div class="comment-body">
	<p>Вопрос:<br>
А как можно сделать сразу все объекты передвигаемыми? Т.е. сделать это до того как их в первый раз передвинут?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/5259" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-5290"></a>
<table class="comment-table tborder comment-author-0" id="comment-5290" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float: left;">
		Автор: Гость (не зарегистрирован), дата: 19 октября, 2010 - 22:11
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-5290">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_5290">
	

<div class="comment-body">
	<p>есть одна проблема с получением координат мыши отномительно 
документа: при нахождении мыши над обьектом со свойством position:fixed;
 в интернет эксплорере значение координат остается не определенным.. как
 можно это исправить?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/1593/5290" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><h2 class="title">Отправить комментарий</h2> Приветствуются комментарии:
        <ul style="margin-top: 0pt;">
        <li style="font-style: italic;">Полезные.</li>
        <li>Дополняющие прочитанное.</li>
        <li>Вопросы по прочитанному. Именно по прочитанному, чтобы ответ
 на него помог другим разобраться в предмете статьи. Другие вопросы 
могут быть удалены.<br>Для остальных вопросов и обсуждений есть <a href="http://javascript.ru/forum">форум</a>.</li>

        </ul>
        P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.

                     <div><form action="/comment/reply/1593" accept-charset="UTF-8" method="post" id="comment-form">
<div><div class="form-item">
 <label for="edit-name">Ваше имя: </label>
 <input maxlength="60" name="name" id="edit-name" size="30" value="Гость" class="form-text" type="text">
</div>
<div class="form-item">
 <label for="edit-mail">Адрес электронной почты: </label>
 <input maxlength="64" name="mail" id="edit-mail" size="30" class="form-text" type="text">
 <div class="description">Содержание этого поля является приватным и не предназначено к показу.</div>
</div>
<div class="form-item">
 <label for="edit-homepage">Домашняя страница: </label>
 <input maxlength="255" name="homepage" id="edit-homepage" size="30" class="form-text" type="text">
</div>
<div class="form-item">
 <label for="edit-comment">Комментарий: <span class="form-required" title="Это поле необходимо заполнить.">*</span></label>
 <div class="resizable-textarea"><span><div class="editor-container" id="editor-0"><input src="draganddrop_files/link.png" class="editor-image-button" onclick="editor.buttonClick(0, 0); return false;" id="editor-0-button-0" title="Вставить/Изменить ссылку" accesskey="" type="image"><input src="draganddrop_files/image.png" class="editor-image-button" onclick="editor.buttonClick(0, 1); return false;" id="editor-0-button-1" title="Вставка/Изменение изображения" accesskey="" type="image"><input src="draganddrop_files/bold.png" class="editor-image-button" onclick="editor.buttonClick(0, 2); return false;" id="editor-0-button-2" title="Жирный" accesskey="B" type="image"><input src="draganddrop_files/italic.png" class="editor-image-button" onclick="editor.buttonClick(0, 3); return false;" id="editor-0-button-3" title="Наклонный" accesskey="I" type="image"><input src="draganddrop_files/ol.png" class="editor-image-button" onclick="editor.buttonClick(0, 4); return false;" id="editor-0-button-4" title="Нумерованный список. Превращает выбранные строки в нумерованный список." accesskey="O" type="image"><input src="draganddrop_files/ul.png" class="editor-image-button" onclick="editor.buttonClick(0, 5); return false;" id="editor-0-button-5" title="Список по пунктам. Превращает выбранные строки в список." accesskey="U" type="image"><input value="#" class="editor-text-button" onclick="editor.buttonClick(0, 6); return false;" id="editor-0-button-6" title="Код" accesskey="C" type="button"><input value="CSS" class="editor-text-button" onclick="editor.buttonClick(0, 7); return false;" id="editor-0-button-7" title="CSS" accesskey="" type="button"><input value="HTML" class="editor-text-button" onclick="editor.buttonClick(0, 8); return false;" id="editor-0-button-8" title="HTML" accesskey="" type="button"><input value="JS" class="editor-text-button" onclick="editor.buttonClick(0, 9); return false;" id="editor-0-button-9" title="JS" accesskey="" type="button"><input value="PHP" class="editor-text-button" onclick="editor.buttonClick(0, 10); return false;" id="editor-0-button-10" title="PHP" accesskey="" type="button"><input src="draganddrop_files/preview.png" class="editor-image-button" onclick="editor.buttonClick(0, 11); return false;" id="editor-0-button-11" title="Предпросмотр" accesskey="P" type="image"></div><textarea cols="60" rows="15" name="comment" id="edit-comment" class="form-textarea resizable required  editor-textarea processed"></textarea><div style="margin-right: -2px;" class="grippie"></div></span></div>
</div>
<ul class="tips"><li>Адреса страниц и электронной почты автоматически преобразуются в ссылки.</li><li>Разрешены
 HTML-таги: &lt;strike&gt; &lt;a&gt; &lt;em&gt; &lt;strong&gt; 
&lt;cite&gt; &lt;code&gt; &lt;ul&gt; &lt;ol&gt; &lt;li&gt; &lt;dl&gt; 
&lt;dt&gt; &lt;dd&gt; &lt;u&gt; &lt;i&gt; &lt;b&gt; &lt;pre&gt; 
&lt;img&gt; &lt;abbr&gt; &lt;blockquote&gt; &lt;h1&gt; &lt;h2&gt; 
&lt;h3&gt; &lt;h4&gt; &lt;h5&gt; &lt;p&gt; &lt;div&gt; &lt;span&gt; 
&lt;sub&gt; &lt;sup&gt;</li><li>Строки и параграфы переносятся автоматически.</li><li><a href="http://javascript.ru/filter/tips/1#filter-smileys-0">Текстовые смайлы</a> будут заменены на графические.</li></ul><p><a href="http://javascript.ru/filter/tips">Подробнее о форматировании</a></p><input name="form_id" id="edit-comment-form" value="comment_form" type="hidden">
<fieldset class="captcha"><legend>CAPTCHA</legend><div class="description">Антиспам</div><div class="form-item">
 <label for="edit-captcha-response">Вопрос: <span class="form-required" title="Это поле необходимо заполнить.">*</span></label>
 <span class="field-prefix">3 + 9 = </span> <input maxlength="2" name="captcha_response" id="edit-captcha-response" size="4" class="form-text required" type="text">
 <div class="description">Введите результат. Например, для 1+3, введите 4.</div>
</div>
<input name="captcha_token" id="edit-captcha-token" value="02cd222a8626ab3ceaab279ef0487c38" type="hidden">
</fieldset>
<input name="op" id="edit-preview" value="Просмотр" class="button form-submit" type="submit">
<input name="op" id="edit-submit" value="Отправить комментарий" class="button form-submit" type="submit">

</div></form>
</div></div>


</td>

<td><!-- padding -->&nbsp;</td>
<td class="block">
<div id="ajaxCartUpdate"></div>
<table class="tborder tblock" id="block-book-0" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-book-0')"><img id="collapseimg_block-book-0" src="draganddrop_files/collapse_thead.gif" alt="" border="0"></a>
		
		Текущий раздел
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-book-0" style="">

<tr>
	<td class="alt1"><ul class="menu"><li class="leaf"><a href="http://javascript.ru/ui/draganddrop" class="active">Drag and drop</a></li><li class="leaf"><a href="http://javascript.ru/ui/tree">Грамотное javascript-дерево за 7 шагов</a></li><li class="leaf"><a href="http://javascript.ru/ui/ajax">Интеграция AJAX в интерфейс</a></li><li class="leaf"><a href="http://javascript.ru/ui/offset">Координаты элемента на странице</a></li><li class="leaf"><a href="http://javascript.ru/ui/show-hide-toggle">Правильные show/hide/toggle</a></li><li class="leaf"><a href="http://javascript.ru/ui/ajaxtree">Удобное дерево с AJAX-подгрузкой</a></li></ul></td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-search-0" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-search-0')"><img id="collapseimg_block-search-0" src="draganddrop_files/collapse_thead.gif" alt="" border="0"></a>
		
		Поиск по сайту
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-search-0" style="">

<tr>
	<td class="alt1"><form action="/search/node" accept-charset="UTF-8" method="post" id="search-block-form">
<div><div class="container-inline"><div class="form-item">
 <input maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys" size="15" title="Введите слова, которые вы хотите искать." class="form-text" type="text">
</div>
<input name="op" value="Поиск" class="button form-submit" type="submit">
<input name="form_id" id="edit-search-block-form" value="search_block_form" type="hidden">
</div>
</div></form>
</td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-block-2" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-block-2')"><img id="collapseimg_block-block-2" src="draganddrop_files/collapse_thead.gif" alt="" border="0"></a>
		
		Содержание
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-block-2" style="">

<tr>
	<td class="alt1"><div style="padding-left: 10px;">

<h2 id="guru-js" class="chapter-header">Учебник javascript</h2>


<ul class="book-tree book-tree-short book-tree-top" style="margin-bottom: 0pt;"><li class="leaf book-tree-3930"><a href="http://javascript.ru/tutorial/intro" class="book-tree-link-1">Введение</a></li><li class="collapsed book-tree-4125"><a href="http://javascript.ru/tutorial/foundation" class="book-tree-link-1">Основы javascript</a></li><li class="collapsed book-tree-605"><a href="http://javascript.ru/tutorial/dom" class="book-tree-link-1">DOM: работа с HTML-страницей</a></li><li class="collapsed book-tree-445"><a href="http://javascript.ru/tutorial/events" class="book-tree-link-1">События</a></li><li class="collapsed book-tree-443"><a href="http://javascript.ru/tutorial/object" class="book-tree-link-1">Объекты, ООП</a></li><li class="leaf book-tree-453"><a href="http://javascript.ru/tutorial/ajax" class="book-tree-link-1">AJAX</a></li><li class="leaf book-tree-6202"><a href="http://javascript.ru/tutorial/regexp-specials" class="book-tree-link-1">Особенности регулярных выражений в Javascript</a></li></ul>

<h2 id="language" class="chapter-header">Основные элементы языка</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="leaf book-tree-107"><a href="http://javascript.ru/basic/types" class="book-tree-link-1">Базовые типы: Строки, Числа, Boolean</a></li><li class="leaf book-tree-112"><a href="http://javascript.ru/basic/operators" class="book-tree-link-1">Операторы, их особенности в JS</a></li><li class="leaf book-tree-110"><a href="http://javascript.ru/basic/array" class="book-tree-link-1">Массивы </a></li><li class="leaf book-tree-121"><a href="http://javascript.ru/basic/functions" class="book-tree-link-1">Функции</a></li><li class="leaf book-tree-680"><a href="http://javascript.ru/basic/closure" class="book-tree-link-1">Замыкания </a></li><li class="leaf book-tree-105"><a href="http://javascript.ru/basic/regular-expression" class="book-tree-link-1">Регулярные выражения</a></li><li class="leaf book-tree-113"><a href="http://javascript.ru/basic/syntax-switch-for" class="book-tree-link-1">Конструкции языка. Обработка ошибок.</a></li></ul>
<h2 id="tools" class="chapter-header">Сундучок с инструментами</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="collapsed book-tree-596"><a href="http://javascript.ru/tools/development" class="book-tree-link-1">Редактирование и отладка скриптов</a></li><li class="collapsed book-tree-434"><a href="http://javascript.ru/tools/cookie" class="book-tree-link-1">Cookie</a></li><li class="collapsed book-tree-437"><a href="http://javascript.ru/tools/http-debug" class="book-tree-link-1">HTTP-Отладка</a></li><li class="collapsed book-tree-436"><a href="http://javascript.ru/tools/html-source" class="book-tree-link-1">Просмотр живого HTML</a></li><li class="collapsed book-tree-454"><a href="http://javascript.ru/tools/plugin" class="book-tree-link-1">Разное полезное</a></li></ul>

<h2 id="ui" class="chapter-header">Интерфейсы</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="leaf book-tree-1593"><a href="http://javascript.ru/ui/draganddrop" class="book-tree-link-1 active">Drag and drop</a></li><li class="leaf book-tree-708"><a href="http://javascript.ru/ui/tree" class="book-tree-link-1">Грамотное javascript-дерево за 7 шагов</a></li><li class="leaf book-tree-1418"><a href="http://javascript.ru/ui/ajax" class="book-tree-link-1">Интеграция AJAX в интерфейс</a></li><li class="leaf book-tree-1676"><a href="http://javascript.ru/ui/offset" class="book-tree-link-1">Координаты элемента на странице</a></li><li class="leaf book-tree-6174"><a href="http://javascript.ru/ui/show-hide-toggle" class="book-tree-link-1">Правильные show/hide/toggle</a></li><li class="leaf book-tree-1419"><a href="http://javascript.ru/ui/ajaxtree" class="book-tree-link-1">Удобное дерево с AJAX-подгрузкой</a></li></ul>

<h2 id="ajax" class="chapter-header">Все об AJAX</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="leaf book-tree-69"><a href="http://javascript.ru/ajax/intro" class="book-tree-link-1">Введение в Ajax</a></li><li class="leaf book-tree-71"><a href="http://javascript.ru/ajax/rich-client" class="book-tree-link-1">Ajax и Rich Client</a></li><li class="leaf book-tree-72"><a href="http://javascript.ru/ajax/client-server" class="book-tree-link-1">Ajax и клиент-серверная архитектура.</a></li><li class="collapsed book-tree-441"><a href="http://javascript.ru/ajax/transport" class="book-tree-link-1">Способы общения с сервером</a></li><li class="collapsed book-tree-440"><a href="http://javascript.ru/ajax/comet" class="book-tree-link-1">COMET</a></li><li class="leaf book-tree-68"><a href="http://javascript.ru/ajax/formats" class="book-tree-link-1">Форматы данных для AJAX</a></li><li class="leaf book-tree-85"><a href="http://javascript.ru/ajax/cross-domain-scripting" class="book-tree-link-1">Обмен данными для документов с разных доменов</a></li><li class="leaf book-tree-5225"><a href="http://javascript.ru/ajax/cross-origin-2" class="book-tree-link-1">Обмен данными между доменами. Часть 2.</a></li></ul>

<h2 id="optimize" class="chapter-header">Оптимизация</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="collapsed book-tree-5768"><a href="http://javascript.ru/optimize/google-closure-compiler" class="book-tree-link-1">Google Closure Compiler в деталях</a></li><li class="leaf book-tree-400"><a href="http://javascript.ru/optimize/performance-rules" class="book-tree-link-1">Yahoo: лучшие способы ускорения сайта</a></li><li class="leaf book-tree-65"><a href="http://javascript.ru/optimize/yslow" class="book-tree-link-1">Анализ оптимизации страниц c Yslow</a></li><li class="leaf book-tree-723"><a href="http://javascript.ru/optimize/antimvc" class="book-tree-link-1">Интерфейсы. Прочь от MVC</a></li><li class="leaf book-tree-142"><a href="http://javascript.ru/optimize/javascript-performance" class="book-tree-link-1">Оптимизация Javascript-кода</a></li><li class="leaf book-tree-10975"><a href="http://javascript.ru/optimize/documentfragment-0" class="book-tree-link-1">Польза от documentFragment</a></li><li class="leaf book-tree-140"><a href="http://javascript.ru/optimize/javascript-compression" class="book-tree-link-1">Сжатие Javascript и CSS</a></li><li class="leaf book-tree-778"><a href="http://javascript.ru/optimize/better-compression" class="book-tree-link-1">Улучшаем сжимаемость Javascript-кода. </a></li><li class="leaf book-tree-710"><a href="http://javascript.ru/optimize/cache-versioning" class="book-tree-link-1">Умное Кеширование и Версионность в Javascript/CSS</a></li></ul>
<h2 id="misc" class="chapter-header">Разное</h2>
<ul class="book-tree book-tree-short book-tree-top"><li class="collapsed book-tree-449"><a href="http://javascript.ru/unsorted/async" class="book-tree-link-1">Асинхронное программирование</a></li><li class="leaf book-tree-4908"><a href="http://javascript.ru/unsorted/google-gears" class="book-tree-link-1">Google Gears в деталях</a></li><li class="leaf book-tree-707"><a href="http://javascript.ru/unsorted/bridge-to-flash" class="book-tree-link-1">Javascript &lt;-&gt; Flash мост</a></li><li class="leaf book-tree-896"><a href="http://javascript.ru/unsorted/bookmarklet" class="book-tree-link-1">Букмарклеты и правила их написания</a></li><li class="leaf book-tree-151"><a href="http://javascript.ru/unsorted/book-choice" class="book-tree-link-1">О подборке книг на сайте</a></li><li class="leaf book-tree-807"><a href="http://javascript.ru/unsorted/why_href_js_is_bad" class="book-tree-link-1">Почему &lt;a href="javascript:..."&gt; - плохо</a></li><li class="leaf book-tree-10695"><a href="http://javascript.ru/unsorted/id" class="book-tree-link-1">Способы идентификации в интернете</a></li><li class="leaf book-tree-4176"><a href="http://javascript.ru/unsorted/w3c" class="book-tree-link-1">Уровни DOM</a></li><li class="leaf book-tree-717"><a href="http://javascript.ru/unsorted/read" class="book-tree-link-1">Что почитать?</a></li><li class="leaf book-tree-798"><a href="http://javascript.ru/unsorted/templating" class="book-tree-link-1">Шаблонизация с javascript</a></li><li class="leaf book-tree-809"><a href="http://javascript.ru/unsorted/selenium-rc" class="book-tree-link-1">Юнит-тесты уровня браузера на связке Selenium + PHP.</a></li><li class="leaf book-tree-394"><a href="http://javascript.ru/unsorted/html-css-manual" class="book-tree-link-1">Справочники: Javascript/HTML/CSS</a></li><li class="leaf book-tree-5783"><a href="http://javascript.ru/unsorted/google-closure-library-build" class="book-tree-link-1">Система сборки и зависимостей Google Closure Library</a></li><li class="leaf book-tree-683"><a href="http://javascript.ru/unsorted/storage" class="book-tree-link-1">Хранение данных на клиенте. DOM Storage и его аналоги.</a></li><li class="leaf book-tree-1016"><a href="http://javascript.ru/unsorted/top-10-functions" class="book-tree-link-1">10 лучших функций на JavaScript</a></li></ul>
<p style="text-align: right; margin-bottom: 0pt;"><a href="http://javascript.ru/doctree">Дерево всех статей</a></p>
</div></td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-simplenews-newsletter-569" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-simplenews-newsletter-569')"><img id="collapseimg_block-simplenews-newsletter-569" src="draganddrop_files/collapse_thead.gif" alt="" border="0"></a>
		
		Статьи и мероприятия
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-simplenews-newsletter-569" style="">

<tr>
	<td class="alt1"><p>Будьте в курсе наших последних новостей!</p>
<div id="newsletter-form" class="newsletter-form"><form action="/ui/draganddrop" accept-charset="UTF-8" method="post" id="simplenews-block-form-569">
<div><div class="form-item">
 <label for="edit-mail">Адрес электронной почты: <span class="form-required" title="Это поле необходимо заполнить.">*</span></label>
 <input maxlength="128" name="mail" id="edit-mail" size="20" class="form-text required" type="text">
</div>
<div class="form-radios"><div class="form-item">
 <label class="option"><input name="action" value="subscribe" checked="checked" class="form-radio" type="radio"> Подписаться!</label>
</div>
<div class="form-item">
 <label class="option"><input name="action" value="unsubscribe" class="form-radio" type="radio"> Отказаться от подписки</label>
</div>
</div><input name="op" id="edit-submit" value="Отправить" class="button form-submit" type="submit">
<input name="form_id" id="edit-simplenews-block-form-569" value="simplenews_block_form_569" type="hidden">

</div></form>
</div></td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-vbforumblocks-1" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-vbforumblocks-1')"><img id="collapseimg_block-vbforumblocks-1" src="draganddrop_files/collapse_thead.gif" alt="" border="0"></a>
		
		Последние обсуждения на форуме
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-vbforumblocks-1" style="">

<tr>
	<td class="alt1"><div class="item-list"><ul><li><a href="http://javascript.ru/forum/misc/12870-nuzhna-pomoshh-otzovites-plz.html" title="Доброго времени суток. В общем проблема такова. В меню сайта, когда человек нажимает на категорию, выходят подразделы, он выбирает один из них и переходит по нему. При переходе на подраздел, категория остается открытой. Я хочу, чтобы все категории снова закрывались при любом переходе. Или хотя бы, чтобы при собственно ручном закрытии категория оставалась закрытой (а то при обновлении страницы он снова открывается). Внизу дан пример сайта. Вот код .js файла 
﻿/// Accordion menu 
jQuery(document).ready(function(){ 
function createCookie(name,value,days) { 
if (days) { 
var date = new Date(); 
date.setTime(date.getTime()+(days*24*60*60*1000)); 
var expires = &amp;quot;; expires=&amp;quot;+date.toGMTString(); 
} 
else expires = &amp;quot;&amp;quot;; 
document.cookie = name+&amp;quot;=&amp;quot;+value+expires+&amp;quot;; path=/&amp;quot;; 
} 

function readCookie(name) { 
var nameEQ = name + &amp;quot;=&amp;quot;; 
var ca = document.cookie.split(';'); 
for(var i=0;i &amp;lt; ca.length;i++) { 
var c = ca; 
while (c.charAt(0)==' ') c = c.substring(1,c.length); 
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
} 
return null; 
} 

var cookier = readCookie(&amp;quot;actr&amp;quot;); 
var actr = cookier ? cookier : 0; 
var cookiel = readCookie(&amp;quot;actl&amp;quot;); 
var actl = cookiel ? cookiel : 0; 

jQuery(&amp;quot;.accordion h3:eq(&amp;quot;+actr+&amp;quot;)&amp;quot;).addClass(&amp;quot;active&amp;quot;); 
jQuery(&amp;quot;.accordion p:eq(&amp;quot;+actr+&amp;quot;)&amp;quot;).show(); 

jQuery(&amp;quot;.accordion h3&amp;quot;).click(function(){ 
var index = jQuery(&amp;quot;.accordion h3&amp;quot;).index(this); 
createCookie(&amp;quot;actr&amp;quot;, index, 365); 

jQuery(this).next(&amp;quot;p&amp;quot;).slideToggle(&amp;quot;fast&amp;quot;) 
.siblings(&amp;quot;p:visible&amp;quot;).slideUp(&amp;quot;fast&amp;quot;); 
jQuery(this).toggleClass(&amp;quot;active&amp;quot;); 
jQuery(this).siblings(&amp;quot;h3&amp;quot;).removeClass(&amp;quot;active&amp;quot;); 

}); 

}); 

Что тут нужно исправить? помогите плз. 
Пример меню на сайте 1program.ru (зайдите в любую категорию поймете)." rel="nofollow">Нужна помощь. Отзовитесь плз)</a>
</li><li><a href="http://javascript.ru/forum/misc/12871-cifry-v-podstrochnyjj-registr.html" title="Вот встала задача записывать цифры (например при вводе формул химических) в подстрочный регистр, написал:

var fou=&amp;quot;H2SO4&amp;quot;;
var m=fou.split('');
for(var i=0; i&amp;lt;m.length; i++){
	if(m=='0' || m=='1' || m=='2' || m=='3' || m=='4' || m=='5' || m=='6' || m=='7' || m=='8' || m=='9') m='&amp;lt;sub&amp;gt;'+m+'&amp;lt;/sub&amp;gt;';
}
var fou=m.join('');


работает, но както оно некрасиво получается. Подскажите как тут сократить код, сделать его компактнее (вопрос чисто интереса).
Пытался записать список цифр в операцию сравнения в виде регулярного выражения (чтоб обойтись без || ) - неполучилось... :no:" rel="nofollow">Цифры в подстрочный регистр...</a>
</li><li><a href="http://javascript.ru/forum/project/12841-zagadochnye-tormoza-v-skripte.html" title="Привет всем!
Есть скрипт:

http://blojik.anphilada.ru/snake/snake.html

Возникают непонятные и неопознанные тормоза: змейка иногда на середине пути без каких-либо на то причин останавливается и тормозит пару секунд. При этом по логике никаких вычислений не происходит. 
Я грешу на то, что возможно в этот момент до garbage collector доходит начать собирать мусор от прошлых операций, но насколко это правда - я не знаю.
Возможно ли идентифицировать от чего могут быть тормоза? Возможно я где-то неверно обращаюсь с массивами или выполняю какую-то очень затратную операцию. Профайлер мозиллы ничего интересного по этому поводу не говорит." rel="nofollow">Загадочные тормоза в скрипте.</a>
</li><li><a href="http://javascript.ru/forum/dom-window/12869-smenyayushhiesya-izobrazhenniya-s-vydeleniem-v-ramku-tekushhego-aktivnogo.html" title="Здравствуйте. 
Подскажите пожалуйста, с помощью чего можно сделать превью break новостей, как на этом сайте - http://www.thesun.co.uk/sol/homepage/ (размещены чуть выше центра) ?

То есть:
а) Автоматическая смена картинок.
б) Выделение красной рамкой текущей показываемой картинки
в) Возможность вручную(тоесть при наведении мышкой) менять картинку.

Может быть есть уже некие готовые компоненты, или может примеры, с подходящей, по задачи описанной выше, реализацией?

Заранее благодарю за помощь." rel="nofollow">Сменяющиеся изображенния с выделением в рамку ...</a>
</li><li><a href="http://javascript.ru/forum/job/12819-vakansiya-v-moskve-js-razrabotchik-80-000-a.html" title="Разыскиваем JS-разработчика в команду :)
С опытом, адекватным отношением к работе и примерами реализованных проектов. 

Обязанности:

-разработка Javascript-сценариев для сайтов и CMS-компании;
-реализация интерактивных элементов;
-постоянная оптимизация существующего Javascript-кода, рефакторинг;
-участие в разработке международных проектов, работа в команде.

Пожелания к профессионалу:

-опыт работы в данной сфере не менее 2 лет, наличие завершенных проектов;
-знание чистого кросс-браузерного Javascript;
-знание JS-фреймворков (например: jQuery, ExtJS, MooTools, Prototype, YUI);
-валидная кросс-браузерная верстка;
-умение работать с AJAX.

Условия: 	
• оформление по ТК, соц.пакет (мед. страхование, оплата больничных, отпусков);
• офис- метро Алексеевская;
• прекрасная столовая и компенсация обедов;
• отличное руководство, веселые коллеги и возможность профессионального роста:)

Можем гарантировать нетривиальные задачи, понятное ТЗ и быструю обратную связь от внутренних заказчиков :)

Место действия МОСКВА, компания - лидер в отрасли, финансы
полный рабочий день, удаленка, увы, невозможна.

ВОЗНАГРАЖДЕНИЕ:
зп+премии ежемесячные+полугодовые

уровень зависит от кандидата т.е. от 70 000 и дальше

КОНТАКТЫ:

резюме (или краткий рассказ о себе) + ссылки на проекты, примеры кода можно отправлять на e-mail elena.finkova@alpari.org" rel="nofollow">Вакансия в Москве: JS-разработчик, 80 000</a>
</li><li><a href="http://javascript.ru/forum/misc/11031-posovetujjte-malenkuyu-oop-biblioteku.html" title="Подскажите пожалуйста компактыне библиотеки предназначенные именно для создание больших и гибких проектов на js. Пересмотрел как варинты truejs, base.js, dojo - но каждый чем-то не устроил.
Буду благодарен за ссылки =)" rel="nofollow">Посоветуйте маленькую ооп библиотеку</a>
</li><li><a href="http://javascript.ru/forum/ajax/12853-obrabotka-ajax-zaprosa.html" title="Есть такой запрос:

 content.xmlhttp.open('POST', '/request/getValue.php', true);
      content.xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      content.xmlhttp.onreadystatechange = function() {
            if (content.xmlhttp.readyState == 4) {
                if (content.xmlhttp.status == 200) {
                    content.target.innerHTML = content.xmlhttp.responseText;
                }
            }
        };
        content.xmlhttp.send(content.control.id);
    },

Передаю на сервер значение ID элемента, в соответствии с этим хочу на сервере провести обработку в зависимости от переданного значения ID. Но как обратиться к переменной, которую передаю, я не пойму... Проблема в том, что данные передаются не из формы, а это просто элемент заголовка. Мне нужно для каждого заголовка загружать в DIV нужное содержимое. Для этого и хочу сделать обработку на сервере. На php это можно сделать и если можно то как обратиться к переданному значению?

И с помощью чего лучше реализовать подобную работу? Может есть какие-нибудь библиотеки (javascript+что-то) или я вообще не в том направлении иду?" rel="nofollow">Обработка ajax-запроса</a>
</li></ul></div><a style="display: block; text-align: right;" href="http://javascript.ru/forum/">Forum</a></td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-views-comments_recent" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-views-comments_recent')"><img id="collapseimg_block-views-comments_recent" src="draganddrop_files/collapse_thead.gif" alt="" border="0"></a>
		
		Последние комментарии
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-views-comments_recent" style="">

<tr>
	<td class="alt1"><div class="view view-comments-recent"><div class="view-content view-content-comments-recent"><div class="item-list"><ul><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/unsorted/id#comment-5463">Дауж. Сколько способов воровать данные...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Гость (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>14 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/window.history#comment-5462">Жаль что нельзя URL смотреть :(</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name"><a href="http://javascript.ru/person/alex_oo7" title="Информация о пользователе.">alex_oo7</a></div><div class="view-field view-data-comments-timestamp"><em>4 часа 10 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/blog/mycoding/Raphael-framework#comment-5461">Добрый день!
</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">dom (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>4 часа 40 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/tutorial/events/intro#comment-5460">Не очень понял смысл return false в...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name"><a href="http://javascript.ru/person/vahrusha" title="Информация о пользователе.">vahrusha</a></div><div class="view-field view-data-comments-timestamp"><em>5 часов 10 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/blog/rus1978/kak-poluchit-tekst-mezhdu-tegami-NOSCRIPT-ispolzuya-javascript#comment-5459">text=document.getElementById('metka')
</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">CTAPbIu_MABP (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>20 часов 34 минуты</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/php/strpos#comment-5458">Индекс, начиная с которого производить...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name"><a href="http://javascript.ru/person/Brmaley.ee" title="Информация о пользователе.">B@rmaley.e&gt;&lt;e</a></div><div class="view-field view-data-comments-timestamp"><em>23 часа 39 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/php/strpos#comment-5457">а что за параметр offset в первой ф-ции...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">senya (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>1 день 56 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/unsorted/top-10-functions#comment-5456">localhost )</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Гость (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>1 день 3 часа</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/Date#comment-5455">Третий параметр в dateObj = new...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Ilia (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>1 день 7 часов</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/optimize/documentfragment-0#comment-5454">В тексте, который ниже бенчмарка три...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Бирюков Павел (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>1 день 23 часа</em> назад</div></div>
</li></ul></div></div><div class="more-link"><a href="http://javascript.ru/comments">еще</a></div></div>
</td>
</tr>

</tbody>

</table>
<script>
var ACUholder = document.getElementById('ajaxCartUpdateHolder')
var ACU = document.getElementById('ajaxCartUpdate')
if (ACU) ACUholder.parentNode.removeChild(ACUholder) 
else ACUholder.setAttribute('id', 'ajaxCartUpdate')
</script>
</td>

</tr>
</tbody></table>





<!-- WebVisor 
<script type="text/javascript" id="__visorCode"></script>
<script type="text/javascript">
if (!window.opera) {
    var __visorInit = new Function('', 'if (typeof window["__visor"] != "undefined") __visor.init(19645);');
    setTimeout('document.getElementById("__visorCode").src="//c1.web-visor.com/c.js";',10);
}
</script>
<noscript><img src="//c1.web-visor.com/noscript?sid=19645" alt="" 
style="position:absolute;width:1px;height:1px;left:-999px;top:-999px;"></noscript>
 WebVisor -->


<br>

	</td>
</tr>
</tbody></table>
<!-- / close content container -->
<!-- /content area table -->
</td></tr>
</tbody></table><!-- / content table --></td>
</tr>
<tr>

	<td class="footer-row"><table class="page" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr>
	
	<td class="tfoot" width="100%" align="right">

		<div class="smallfont" style="height: 31px; line-height: 31px; text-align: center;">


		

			<strong>
<span style="padding-right: 20px;">© Илья Кантор, 2007-2010</span>
				<a href="http://javascript.ru/contact" rel="nofollow">Обратная связь</a> -
				
				


				
				<a href="#top" onclick="self.scrollTo(0, 0); return false;">Вверх</a>
			</strong>

		</div>
	</td>
</tr>
<tr>
<td style="text-align: center; color: gray; font-size: 12px;">


</td>
</tr>
</tbody></table><!-- / footer table --></td>
</tr>
</tbody></table><!-- / main table -->




<script type="text/javascript" src="draganddrop_files/scripts.js"></script>


<script type="text/javascript">vBulletin_init()</script>


</div>


<script type="text/javascript">
var ga = document.createElement('script')
ga.type = 'text/javascript'
ga.src = 'http://www.google-analytics.com/ga.js'
ga.async = true
document.getElementsByTagName('head')[0].appendChild(ga)

window.yandex_metrika_callback = function() {
        window.yaCounter1178660 = new Ya.Metrika(1178660)
}
var s = document.createElement('script')
s.type = 'text/javascript'
s.src =  'http://mc.yandex.ru/metrika/watch.js'
s.async = true
document.getElementsByTagName('head')[0].appendChild(s)

</script>



 <!-- #wrapper -->
<table style="position: absolute; display: none;" class="editor-popup" id="editor-dialog"><tbody><tr class="head even"><td class="title"></td><td class="close"><a>x</a></td></tr><tr class="body odd"><td colspan="2" class="content"></td></tr></tbody></table></body></html>